Почему рендеринг ngModel $ не вызывается, когда модель изменяется в AngularJS?

Question

DEMO

Почему в следующем примере $render не вызывается, когда нажимается кнопка?

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

Answer 1

директива input работает после директивы и, таким образом, это $render функция меняет ваше.

Установить приоритет вашей директивы к чему-то большему, чем 0. Например:

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

И ваш $render будет иметь преимущество, и вы увидите ваше предупреждение называется.

Answer 2

ngModel.$render работает, когда звонит $render в $apply.

app.directive('changecase', function ($timeout) { 
 
    return { 
 
    restrict: 'A', 
 
    require: 'ngModel', 
 
    priority: 1, 
 
    link: function (scope, element, attrs, ngModel) { 
 
     
 
     //format text going to user (model to view) 
 
     ngModel.$formatters.push(function(value) { 
 
      return value.toUpperCase(); 
 
     }); 
 

 
     //format text from the user (view to model) 
 
     ngModel.$parsers.push(function(value) { 
 
      return value.toUpperCase(); 
 
     }); 
 

 
     element.on('blur keyup change', function() { 
 
      scope.$apply(function(){ 
 
       ngModel.$setViewValue(ngModel.$modelValue); 
 
       ngModel.$render(); 
 
      }); 
 
      }); 
 
     } 
 
    } 
 
});