Angularjs 角度指令：混合属性数据和ngModel

我很幸运地构建了共享作用域和隔离作用域的指令，但我很难找到正确的方法来实现这两个目标

我试图获取一个类似于上面的输入，并装订一个UL，ng在它之后的属性列表上重复。我有两个问题

1） 如何正确连接共享ng模型范围

2） 这个编译函数有什么不正确的地方吗

---

将隔离范围与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));
        }
    }
}]);

{{search}}
指令（'appendMe'，['$compile'，函数（$compile）{
返回{
限制：“A”，
作用域：{terms:'='}，
链接：函数（范围、元素、属性）{//链接函数
console.log（范围、术语）；
变量模板='测试
'+
“
{{term}}
”+
“hm.
”
元素（$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));
        }
    }
}]);

{{search}}
指令（'appendMe'，['$compile'，函数（$compile）{
返回{
限制：“A”，
作用域：{terms:'='，搜索：'=ngModel'}，
链接：函数（范围、元素、属性）{//链接函数
console.log（范围、术语）；
变量模板='测试
'+
“
{{term}}
”+
“hm.
”
元素（$compile（template）（scope））；
}
}
}]);

这两个选项似乎都很好。

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

如果将编译器的代码段从

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

。。。
电话服务(
“测试
”+
“
{{term}}
”+
“hm.
”
);
...

到

。。。
电话服务(
“测试
”+
“
{{term}
”+
“hm.
”
);
...

ng repeat

将正确渲染。然而，我无法告诉你它为什么有效

我认为第二种选择是可行的。人们似乎忘记了他们只能读取其他指令的属性。

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