Angular JS directive, change a 2 way data binding in the link function

Question

I'm trying to create an angular directive where I can set the options either via a single options object, or via some attributes. Here is an example of the kind of code:

app.directive('testElement', [function () {
    return {
        restrict: "E",
        scope: {
            options: "="
        },
        template: "<p><span>Name: </span>{{ options.name }}</p>",
        link: function (scope, element, attrs) {
            scope.options = scope.options || {};
            if (attrs.name)
                scope.options.name = attrs.name;
        }
    };
}]);

This works fine, in that the name value is displayed if I pass in a name via the options attribute. But if I pass a name via the name attribute, even though the link function does modify options, the value is not rendered.

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

I feel like I'm missing something fundamental in how the 2 way data binding of options works.

Patrick · Accepted Answer · 2014-03-26 15:46:05Z

6

If you don't pass the two way data binding, angular gets angry:

https://github.com/angular/angular.js/issues/1435

Use optional binding (=?):

app.directive('testElement', [function () {
    return {
        restrict: "E",
        scope: {
            options: "=?"
        },
        template: "<p><span>Name: </span>{{ options.name }}{{ test }}</p>",
        link: function (scope, element, attrs) {
            scope.options = scope.options || {};
            if (attrs.name)
                scope.options.name = attrs.name;
        }
    };
}]);

Or if you are using an older version of angular, use $eval on attrs. options:

app.directive('testElement', [function () {
    return {
        restrict: "E",
        //Still can create isolate scope to not clobber parent scope variables.
        scope: {},
        template: "<p><span>Name: </span>{{ options.name }}{{ test }}</p>",
        link: function (scope, element, attrs) {
            scope.options = scope.$eval(attrs.options) || {};
            if (attrs.name)
                scope.options.name = attrs.name;
        }
    };
}]);

answered Mar 26, 2014 at 15:46

Patrick

6,9783 gold badges25 silver badges31 bronze badges

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

2 Comments

Chandermani Over a year ago

You can use =?, see my answer

Vincent Over a year ago

When using the optional double binding, the value is never passed(v1.3.10). scope: { selectedValue: '=?selectedValue' }. Works when removing the ?. Any idea how this can happen?

Chandermani · Accepted Answer · 2014-03-26 15:46:11Z

1

The directive requires a options parameter. In second case you have not supplied it and hence there is an error

If the isolated scope variable is optional use ? like

 scope: {
            options: "=?"
        }

See my plunkr http://plnkr.co/edit/eGh6r1X7HzY1sZIDYZ69?p=preview

and documentation on isolated scope here http://docs.angularjs.org/api/ng/service/$compile

answered Mar 26, 2014 at 15:46

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Collectives™ on Stack Overflow

Angular JS directive, change a 2 way data binding in the link function

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related