Question

我的输入上有ng-change，然后我将其更改为contenteditable div，因此我可以更多地控制我可以对输入做些什么。但问题是，当我从输入更改为div时，我无法再使用ng-change。我能做些什么来获得相同的效果/结果？

以下是我在模板中使用它的方法：

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

Answer 1

为了支持ng-model ng-change除了表单元素以外的任何内容，您需要创建一个自定义指令。例如，一个名为contenteditable的指令下面的简单实现（非常类似于具有input，form等内部指令的angular，它需要ng-model并且{{1} event设置viewvalue并渲染ng-model。如果keyup setViewValue且值与prev值不同，则角度将评估ng-model表达式。

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);
          }

        }
    }
});

＆＃13;

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

＆＃13;

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);
      }

    }
  }
});

＆＃13;

Answer 2

ng-change仅适用于输入而不是div。尝试点击。

有关实现自定义指令以将模型绑定到可信任div的示例，请参阅here。

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

假设您的指令链接功能如下所示：

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

然后你可以将viewChangeListener附加到ngModel。

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

Answer 6

ng-change仅在输入从js更改时才起作用。因此ng-change仅适用于输入标签。将自定义指令应用于div可能会解决您的问题。

如何在div（或类似的东西）上使用ngChange

6 个答案: