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

AngularJS Directive: Pass dynamically created object as attribute for nested directive

本文关键字:指令 嵌套 属性 对象 动态 创建 AngularJS      更新时间:2023-09-26

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

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

                }
            };
        }]
        )
;
您在

作用域定义中使用$eval而不是像这样使用"&"的任何特定原因

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

如果您使用

fruitoptions:'&fruitinfo'

然后你做

scope.fruitoptions=$scope.fruitoptions() 
在您的链接函数

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

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