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

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',scope: {terms: '=',search: '=ngModel'},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));
        }
    }
}]);

两种选择似乎都很好.