Угловая - Директива скрывает вход

Question

У меня есть пользовательская директива:

.directive('myDirective', function() { 
    return { 
     scope: {ngModel:'='}, 
     link: function(scope, element) {   
      element.bind("keyup", function(event) { 
        scope.ngModel=0; 
        scope.$apply(); 
      });   
     } 
    } 
}); 

Это работает, как и планировался, установив переменные 0 на KeyUp, но она не отражает изменения на самом входных данных. Также при инициализации значения модели не находятся на входе. Вот пример:

http://jsfiddle.net/prXm3/

Что мне не хватает?

Answer 1

Вам необходимо установить наблюдателя для заполнения данных, поскольку директива создает изолированную область.

angular.module('test', []).directive('myDirective', function() { 
    return { 
     scope: { 
      ngModel: '=' 
     }, 
     link: function (scope, element, attrs) { 
      scope.$watch('ngModel', function (val) { 
       element.val(scope.ngModel); 
      }); 

      element.bind("keyup", function (event) { 
       scope.ngModel = 0; 
       scope.$apply(); 
       element.val(0); //set the value in the dom as well. 
      }); 
     } 
    } 
}); 

Или, вы можете изменить шаблон для

<input type="text" ng-model="$parent.testModel.inputA" my-directive> 

данные будут заселены думали, что это нарушит вашу логику, чтобы сделать привязку события.

Так что проще использовать наблюдателя.

Working Demo