我有一个包含另一个指令的指令。 child指令接受“options”对象作为属性。我想在父指令的链接函数中创建这个选项对象,然后将其设置为父模板中子指令的属性,但如果动态创建选项对象,则不会设置它。如果在模板本身中静态设置了选项对象,则此方法有效。
我这里有一个傻瓜:http://plnkr.co/edit/gNeKMcneO8RDBmlmpt72?p=preview 任何指针都将非常感谢!!
angular.module('nestedDirectives', [])
.directive('fruitinfo',
[
function() {
return {
restrict: 'A',
scope: {
fruitname: '@?'
},
template: '<br>Fruit Name: {{fruitname}}<br>Fruit Options: {{fruitoptions}}',
link: function(scope, element, attrs) {
scope.fruitoptions = scope.$eval(attrs['fruitinfo']);
}
};
}])
.directive('fruits',
[
function() {
return {
restrict: 'E',
scope: {
selectedFruits: '=?',
btnSizeClass: "@?"
},
template: 'btnSizeClass: {{btnSizeClass}}<br>Fruits: {{fruits}}<br><div ' +
' fruitinfo="fruitOptions" ' +
' fruitname="{{f}}"' +
' ng-repeat="f in fruits">' +
'</div><br><br>' +
'<div fruitname="With static fruitOptions: {{f}}" fruitinfo="{test: \'testOption\', btnSizeClass: \'btn-xs\'}" ng-repeat="f in fruits"></div>',
link: function(scope, element, attrs) {
scope.fruitOptions = {test: 'testOption', btnSizeClass: scope.btnSizeClass};
scope.fruits = ['Apple', 'Banana', 'Watermelon', 'Strawberry'];
}
};
}]
)
;
答案 0 :(得分:2)
您使用$ eval而不是使用“&amp;”的任何特殊原因在你的范围定义中,像这样
http://plnkr.co/edit/W47LZsQ3i4zS8Feu7sDl?p=preview
如果您使用
fruitoptions:'&fruitinfo'
然后你做
scope.fruitoptions=$scope.fruitoptions()
在您的链接函数中,您将获得其原始范围内的计算表达式,也考虑在链接循环之前调用的控制器函数上执行此操作
答案 1 :(得分:0)
我明白了。必须序列化“fruitOptions”值,以便模板可以将其编译为属性,然后可以使用嵌套指令中的“eval”将其转换回对象。 Plunker已更新。