Javascript AngularJS指令：将动态创建的对象作为嵌套指令的属性传递

我有一个指令围绕着另一个指令。child指令接受“options”对象作为属性。我想在父指令的link函数中创建这个options对象，然后将它设置为父指令模板中子指令的一个属性，但是如果动态创建了options对象，则不会设置它。如果在模板本身中静态设置选项对象，则此操作有效

我这里有一个plunker： 任何指点都将不胜感激

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'];


                }
            };
        }]
        )
;

angular.module（'nestedDirectives'，[]）
.指令（'FROUTINFO'，
[
函数（）{
返回{
限制：“A”，
范围：{
您的名字：“@？”
},
模板：“
水果名称：{{fruitname}}
水果选项：{{fruitoptions}}”，
链接：函数（范围、元素、属性）{
scope.fruitoptions=scope.$eval（attrs['fruitinfo']）；
}
};
}])
.指令（“水果”，
[
函数（）{
返回{
限制：'E'，
范围：{
所选水果：“=？”，
btnSizeClass:“@？”
},
模板：“btnSizeClass:{{btnSizeClass}}
水果：{{Fruits}}
”+
“

”+
'',
链接：函数（范围、元素、属性）{
scope.fruitOptions={test:'testOption'，btnSizeClass:scope.btnSizeClass}；
scope.fruits=[‘苹果’、‘香蕉’、‘西瓜’、‘草莓’]；
}
};
}]
)
;

您在范围定义中使用$eval而不是“&”的具体原因是什么

如果你使用

fruitoptions:'&fruitinfo'

然后你就这么做了

scope.fruitoptions=$scope.fruitoptions() 

---

在你的链接函数中，你将得到被评估的表达式在它的原始范围内，也考虑在链接周期

< p>之前调用的控制器函数上做这件事。必须序列化“水果选项”值，以便模板可以将其编译为属性，然后可以使用嵌套指令中的“eval”将其转换回对象。Plunker已更新。

查看我的Plunker。您可以将其放在子指令链接或控制器函数中。有些实例中，标记创建静态对象，有些实例中，我需要动态提供对象。谢谢你给我的建议和建议。我需要修改我的内部指令，检查是否为fruitinfo提供了一个对象或字符串，然后使用eval或&&uses evaul本身，因此您只需使用它就可以了，无论它是一个范围变量还是一个定义的文本json，它也将被计算