angularjs - Angular 指令 : mixing attribute data and 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 混合是一个记录在案的问题，请参阅 隔离范围陷阱 documentation 中的部分:

Isolated Scope Pitfall Note that if you have a directive with an isolated scope, you cannot require ngModel since the model value will be looked up on the isolated scope rather than the outer scope. When the directive updates the model value, calling ngModel.$setViewValue() the property on the outer scope will not be updated. However you can get around this by using $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));
        }
    }
}]);

这两个选项似乎都工作得很好。