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

麻烦$观看模型通过指令属性传递给父指令

1 个答案: