Detect Element Content Changes With AngularJS

Monday, 18 January 2016 | Posted by Sample

If any DOM element content changes, how will you identify it ?. You can do it in this way, Hold whole DOM element content in one scope variable, and watch that variable. You can bind html content of DIV using ng-bind-html

Click here to see DEMO

Markup

Here div element content bound to divHtmlVar

<div ng-bind-html="divHtmlVar"></div>

Script

Watching divHtmlvar

var myApp = angular.module('myApp', ['ngSanitize'])
function myCtrl($scope) {
    $scope.count = 0;
    $scope.divHtmlVar = '<b>main html</b>';
    $scope.appendText = function() {
      $scope.divHtmlVar = $scope.divHtmlVar + '<br/><i>appended text</i>';  
    }
    $scope.prependText = function() {
      $scope.divHtmlVar = '<i>prepended text</i><br/>' + $scope.divHtmlVar;  
    }
    $scope.$watch('divHtmlVar', function(){
        $scope.count = $scope.count + 1;
    });
}