Question

我很幸运能够建立共享范围的指令，以及隔离范围的指令，但我无法找到正确的方法来做到这两点。

<input type="text" ng-model="search" append-me terms="myTerms">

我正在尝试像上面那样输入一个输入，然后在一个属性列表后面重复一个UL重复的UL。我有两个问题。

1）如何正确连接共享的ng-model范围？

2）我对这个编译函数做错了什么？

Answer 1

将隔离范围与ngModel混合是一个记录在案的问题，请参阅documentation中的隔离范围陷阱部分：

孤立的范围陷阱请注意，如果您具有带隔离范围的指令，则不能要求ngModel，因为将在隔离范围而不是外部范围上查找模型值。当指令更新模型值时，调用ngModel。$ setViewValue（）将不更新外部作用域上的属性。但是你可以使用$ parent来解决这个问题。

使用这些知识和一些怪异的范围实验，我有两个选项可以做你想做的事情：

（1）见fiddle它使用了如上所述的$ parent方法。

<div ng-controller="MyCtrl">
  <div>
    <input ng-form type="text" ng-model="$parent.search" append-me terms="myTerms">
  </div>
  {{search}}
</div>

myApp.directive('appendMe', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {terms: '='},
        link: function(scope, element, attributes) { // linking function
            console.log(scope.terms);
            var template = '<p>test</p>' + 
                '<ul><li ng-repeat="term in terms">{{term}}</li></ul>' +
                '<p>hm…</p>'
            element.after($compile(template)(scope));
        }
    }
}]);

（2）请参阅此fiddle它不使用$ parent，而是使用隔离范围来发布通过ngModel配置的搜索模型。

<div ng-controller="MyCtrl">
    <div>
        <input ng-form type="text" ng-model="search" append-me terms="myTerms">
    </div>
    {{search}}
</div>

myApp.directive('appendMe', ['$compile', function($compile) {
    return {
        restrict: 'A',
        scope: {terms: '=', search: '=ngModel'},
        link: function(scope, element, attributes) { // linking function
            console.log(scope.terms);
            var template = '<p>test</p>' + 
                '<ul><li ng-repeat="term in terms">{{term}}</li></ul>' +
                '<p>hm…</p>'
            element.after($compile(template)(scope));
        }
    }
}]);

这两个选项似乎都运行得很好。

Answer 2

关于＃2，“我对这个编译函数做错了什么？”

如果您从...更改编译的代码段

...
tElement.after(
    '<p>test</p>' + 
    '<ul><li ng-repeat="term in terms">{{term}}</li></ul>' +
    '<p>hm…</p>'
);
...

为...

...
tElement.after(
    '<p>test</p>' + 
    '<ul><li ng-repeat="term in myTerms">{{term}}</li></ul>' +
    '<p>hm…</p>'
);
...

ng-repeat将正确呈现。但是，我不能告诉你为什么它有效。

Angular指令：混合属性数据和ngModel

2 个答案: