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

I have a directive that wraps around another directive . The child directive accepts an "options" object as an attribute. I want to create this options object in the parent directive's link function and then set it as an attribute on the child directive in the parent's template, but the options object does not get set if its created dynamically. This works if the options object is set statically in the template itself.

我有一个包含另一个指令的指令。 child指令接受“options”对象作为属性。我想在父指令的链接函数中创建这个选项对象,然后将其设置为父模板中子指令的属性,但如果动态创建选项对象,则不会设置它。如果在模板本身中静态设置选项对象,则此方法有效。

I have a plunker here: http://plnkr.co/edit/gNeKMcneO8RDBmlmpt72?p=preview Any pointers would be greatly appreciated!!

我在这里有一个plunker: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'];


                }
            };
        }]
        )
;

2 个解决方案

#1

any particular reason why you are using $eval instead of using "&" in your scope definition like this

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

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

if you use

如果你使用

fruitoptions:'&fruitinfo'

and then you do

然后你做

scope.fruitoptions=$scope.fruitoptions()

in your link function you'll get the evaluated expression in its original scope, also consider doing this on the controller function which is invoked prior the link cycle

在你的链接函数中,你将获得在其原始范围内的计算表达式,也考虑在链接循环之前调用的控制器函数上执行此操作

#2

I figured it out. The "fruitOptions" value must be serialized so that the template can compile it as an attribute, which can then be converted back to an object using "eval" in the nested directive. Plunker updated.

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

#1