将DOM事件添加到Angular指令

Andrew 发表于 Dev

安德鲁

我想将DOM事件附加到指令元素，以便更新范围属性。不幸的是，我找不到做到这一点的“干净”方法。现在使它起作用的唯一方法是$apply()在处理程序内部显式调用。我知道这是一种不好的做法，但它也阻止了我使用本机的角度指令（例如with）共享此代码，ng-click="myDOMEventHandler()"因为它会触发$apply already in progress异常。

有没有一种方法可以将DOM事件添加到指令元素中，以便对范围进行更改，而不必调用$apply()？

这是我的意思的一个简单例子。您也可以编辑此Plunker）。

angular.module('myApp', [])
.directive('myDirective', function ($compile) {
  return {
    link: function (scope, element) {
      scope.keystrokes = 0;

      var report = angular.element('<div ng-click="increment()">keystrokes: {{keystrokes}}</div>');
      element.after(report);
      $compile(report)(scope);

      scope.increment = function () {
        scope.keystrokes += 1;
        scope.$apply();
      };

      element.on('keyup', scope.increment);
    }
  };
});

如果在输入中输入一些文本，则计数器递增。如果单击该按钮，则计数器也会增加-但如果引发$apply already in progress异常。

如果删除scope.$apply()，则该异常消失，并且范围属性确实发生了变化，但是这些变化不会显示。

除夕

您不必在scope.increment函数中使用scope。$ apply，但您应该使用

$apply里面element.on('keyup'...))，你外面的角度范围结合有事件

angular.module('myApp', [])
.directive('myDirective', function ($compile) {
  return {
    link: function (scope, element) {
      scope.keystrokes = 0;

      var report = angular.element('<div>keystrokes and clicks: {{keystrokes}} <button ng-click="increment()">Or click me</button></div>');
      element.after(report);
      $compile(report)(scope);

      scope.increment = function () {
        scope.keystrokes += 1;
      
      };
      
      element.on('keyup', function(){
        
        scope.$apply(function(){
          
          scope.increment();
          
        });
        
        
      });
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <input my-directive="" />
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。