Ошибка $ watch model передается родительской директиве с помощью атрибута директивы

Question

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

Учитывая эту установку:

<form child-watch mod="inputModel" name="form"><!--ignore creepy directive name--> 
    <input type="text" name="one" ng-model="inputModel.one"> 
    <input type="text" name="two" ng-model="inputModel.two"><br/> 
    <input type="submit" ng-disabled="form.$pristine"> 
    <p>Original Model: {{original}}</p> 
    <p>Isolate Scope Model: {{isolate}}</p> 
</form> 

Как $watch в inputModel в пределах директивы через его атрибут, а также просматривать изменения, сделанные детьми? Если я использую область выделения, она будет только $ смотреть на родительскую модель, которая теперь не зависит от изолированных детей.

Очевидно, что это не работает, но вы можете видеть направление, я буду:

app.directive('childWatch', function(){ 
    return { 
     // removing the isolate scope allows parent scope.inputModel to update 
     scope:{ 
      mod: "=" 
     }, 
     link: function(scope, element, attrs){ 


      //this does not reflect change upon the parent scope.inputModel 
      //if using isolate scope. AND, I don't want to $watch a specific 
      // model, because the directive needs to be reusable. It needs to watch 
      // an attribute that references the model. 
      scope.$watch('inputModel', function(val){ 
       scope.original = val;   
      },true) 


      //this only has access to the parent scope.inputModel 
      scope.$watch('mod', function(i){ 
       scope.attribute = i;    
      }, true) 
     }  
    } 
}) 

Для того, чтобы сделать директиву для повторного использования для различных моделей, я не могу просто смотреть конкретную модель. Он должен следить за атрибутом, который ссылается на модель. Я не уверен, что это возможно. Есть идеи?

Here's the plunk Я возился с.

Answer 1

При использовании области изолирования доступны только те свойства, которые указаны в scope: { ... }. Используйте mod везде, и он будет работать:

<form child-watch mod="inputModel" name="form"> 
    <input type="text" name="one" ng-model="mod.one"> 
    <input type="text" name="two" ng-model="mod.two"><br/> 
    <p>Model in attribute: {{attribute}}</p> 
    <p>Original model: {{mod}}</p> 
</form> 

Plunker