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

【问题标题】：AngularJS Directive: Pass dynamically created object as attribute for nested directiveAngularJS 指令：将动态创建的对象作为嵌套指令的属性传递
【发布时间】：2015-01-23 03:22:27
【问题描述】：

我有一个包含另一个指令的指令。 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'];


                }
            };
        }]
        )
;

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您在范围定义中使用 $eval 而不是像这样使用“&”的任何特殊原因

http://plnkr.co/edit/W47LZsQ3i4zS8Feu7sDl?p=preview

如果你使用

fruitoptions:'&fruitinfo'

然后你做

scope.fruitoptions=$scope.fruitoptions()

在您的链接函数中，您将获得原始范围内的评估表达式，还可以考虑在链接周期之前调用的控制器函数上执行此操作

【讨论】：

看看我的 plunker。可以放在子指令链接或者控制器函数中
在某些情况下，标记会创建静态对象，而在其他情况下，我需要动态提供对象。感谢上述提示和 plunkr。我需要修改我的内部指令检查是否为fruitinfo提供了对象或字符串，然后使用 eval 或 &
& 使用 evaul 本身，所以无论是范围变量还是定义的文字 json，都可以使用它，它也会被评估 plnkr.co/edit/nvgl1pKenAqGevXl2RW8?p=preview

【解决方案2】：

我想通了。 “fruitOptions”值必须被序列化，以便模板可以将其编译为属性，然后可以使用嵌套指令中的“eval”将其转换回对象。 Plunker 已更新。

【讨论】：