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

Question

我有幸建立了共享范围的指令,以及隔离范围的指令,但我无法找到正确的方法来做到这两点.

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

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

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

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

http://jsfiddle.net/vEQ6W/1/

Answer 1

混合ngModel隔离范围的书面问题,请参阅隔离范围陷阱中部分文件:

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

利用这些知识和一些奇怪的范围实验,我有两个选项可以做你想做的事情:

(1)看到这个小提琴它使用如上所述的$ 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)看到这个小提琴它不使用$ 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));
        }
    }
}]);

两种选择似乎都很好.