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

Question

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.

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

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


                }
            };
        }]
        )
;

Dayan Moreno Leon · Accepted Answer · 2015-01-23 03:34:56Z

2

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

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

answered Jan 23, 2015 at 3:34

Dayan Moreno Leon

5,4552 gold badges25 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dayan Moreno Leon Over a year ago

check out my plunker. You can put it in the child directive link or controller function

user90766 Over a year ago

There are some instances where the markup creates a static object and some others where I need to dynamically provide the object. Thanks for the above tip and the plunkr. I need to modify my inner directive check whether an object or a string has been provided for fruitinfo and then either use eval or the &

Dayan Moreno Leon Over a year ago

& uses evaul itself so you should be fine by just using it whether is a scope variable or a literal json defined it will evaluated too plnkr.co/edit/nvgl1pKenAqGevXl2RW8?p=preview

user90766 · Accepted Answer · 2015-01-23 03:38:12Z

0

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.

answered Jan 23, 2015 at 3:38

user90766

3391 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related