为什么ngModel的$呈现不叫当AngularJS模型的变化？ [英] Why ngModel's $render is not called when the model changes in AngularJS?

问题描述

DEMO

为什么在下面的例子 $渲染单击该按钮时不叫？

＆LT;输入类型=文本NG模型=client.phoneNumber电话号码＆GT;
＆LT;按钮NG点击=client.phoneNumber ='1111111111'＆GT;更改电话号码和LT; /按钮＆GT;


.directive（phoneNumber的功能（）{
  返回{
    限制：'A'，
    要求：'ngModel'，
    链接：功能（范围，元素，ATTRS，ngModel）{
      ngModel。$ =渲染功能（）{
        警报（'渲染'）; //这不叫
      };
    }
  };
}）;


解决方案

的输入指令的指令之后运行，因此它的 $呈现功能取代你的。

您指令的优先级为大于0的值，例如：

  .directive（phoneNumber的功能（）{
  返回{
    限制：'A'，
    要求：'ngModel'，
    优先权：1，
    链接：功能（范围，元素，ATTRS，ngModel）{
      ngModel。$ =渲染功能（）{
        警报（'渲染'）;
      };
    }
  };
}）;
 

和您的 $渲染将采取precedence，你会看到你的警惕之称。

DEMO

Why in the following example $render is not called when the button is clicked?

<input type="text" ng-model="client.phoneNumber" phone-number>
<button ng-click="client.phoneNumber='1111111111'">Change phone number</button>

.directive("phoneNumber", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel) {
      ngModel.$render = function() {
        alert('rendering');   // This is not called
      };
    } 
  };
}); 

解决方案

The input directive is running after your directive and thus it's $render function is replacing yours.

Set your directive's priority to something greater than 0. For instance:

.directive("phoneNumber", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    priority: 1,
    link: function(scope, element, attrs, ngModel) {
      ngModel.$render = function() {
        alert('rendering');
      };
    } 
  };
});

And your $render will take precedence and you'll see your alert is called.

这篇关于为什么ngModel的$呈现不叫当AngularJS模型的变化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！