How to use ngChange on a div (or something similar)

Question

I had the input I was on ng-change, and then I changed it to a div contenteditable, so I can control a bit what I can do with the input. But the fact is that when I switched from input to div, I can no longer use it ng-change. What can I get, get the same effect / result?

This is how I use it in my template:

<div class="form-control" ng-model="search" ng-change="searchChanged()" contenteditable="true">{{seach}}</div>

Answer 1

Inorder ng-model ng-change -, , . , contenteditable ( angular input, form ..), ng-model, keyup view render ng-. setViewValue ng-model , angular ng-change.

.directive('contenteditable', function() {
      return {
        require: 'ngModel',
        restrict: 'A',
        link: function(scope, elm, attr, ngModel) {

          function updateViewValue() {
            ngModel.$setViewValue(this.innerHTML);
          }
          //Binding it to keyup, lly bind it to any other events of interest 
          //like change etc..
          elm.on('keyup', updateViewValue);

          scope.$on('$destroy', function() {
            elm.off('keyup', updateViewValue);
          });

          ngModel.$render = function(){
             elm.html(ngModel.$viewValue);
          }

        }
    }
});

:

<div class="form-control" type="search" 
      ng-model="seach" ng-change="searchChanged()" 
      contenteditable="true"></div>

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.seach = "Initial";
  $scope.searchChanged = function() {
    console.log('changed', $scope.seach);
  }
}).directive('contenteditable', function() {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function(scope, elm, attr, ngModel) {

      function updateViewValue() {
        ngModel.$setViewValue(this.innerHTML);
      }

      //Or bind it to any other events
      elm.on('keyup', updateViewValue);

      scope.$on('$destroy', function() {
        elm.off('keyup', updateViewValue);
      });

      ngModel.$render = function() {
        elm.html(ngModel.$viewValue);
      }

    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  Edit
  <div class="form-control" type="search" ng-model="seach" ng-change="searchChanged()" contenteditable="true"></div>
  {{seach}}
</div>

Hide result

Answer 2

ng-change , div. ng-click.

contenteditable div . .

Answer 3

ng-change div, . ng-change.

Answer 4

// usage
<div ng-model="val" onChange="fireEvent(val)"></div>

// implementation
angular.module('app',[]).directive('contenteditable', [function() {
 return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {

        function read() {
            ngModel.$setViewValue(element.html());
        }

        ngModel.$render = function() {
            element.html(ngModel.$viewValue || '');
        };

        element.bind('blur keyup change', function() {
            scope.$apply(function(){
               read();
               attrs.onChange(ngModel.$viewValue)
            });
        });
      }
  };
}]);

. .

Answer 5

Assuming your directory link looks like this:

link: function ($scope, element, attrs, ngModel) {

then you can attach viewChangeListener to ngModel.

ngModel.$viewChangeListeners.push(function() {
  $scope.$eval(attrs.ngChange);
});