Why does @ bind this AngularJS attribute but = does not?

Question

Why color: "@" work but color: "=" not work in the below code?

http://jsfiddle.net/edwardtanguay/pz2L6etv/8/

var myApp = angular.module('myApp',[]);

function mainController($scope) {
    $scope.message = 'alsjkf';
}

myApp.directive('uiCalendar', function () {
    return {
        restrict: 'A',
        scope: {
            message: "@theMessage",
            color: "=" //works with @
        },
        link: function (scope, element, attrs) {
            scope.color = scope.color === undefined ? 'black' : scope.color;
            $(element).append('<p style="color:'+scope.color+'">added this2: ' + scope.message + ' (' + scope.color + ')</p>');
        }
    };
});

charlietfl · Accepted Answer · 2015-08-12T17:02:27.567

2

The reason is that = is used to bind to variable in parent scope contained within the attribute value

Your color values are not scope variables in the parent scope(controller), they are only strings in your use case. There is no $scope.green or $scope.blue in controller to bind to.

The = would work if you did:

function mainController($scope) {
    $scope.message = 'alsjkf';
    $scope.blue ='#0B0EFF';
}

Then the hex value would be used inside scope of directive.

@ will just take the string value and pass it to directive scope

edited Aug 12 '15 at 17:02

answered Aug 12 '15 at 16:56

charlietfl

170,828
13
121
150

Great, thanks, I got this working where the directive changes the values in the parent scope, if anyone is looking for an example: http://jsfiddle.net/edwardtanguay/pz2L6etv/14/ – Edward Tanguay Aug 13 '15 at 10:00

score 0 · Answer 2 · edited May 23 '17 at 12:18

Directive bindings have different approaches to how they are interpreted.

Using @ means that the scope variable is bound to the string literal value that is passed as that attribute. So using color: '@' binds the scope variable color to the exact value of color="green", which would be scope.color == "green" // this evaluates to true

Using = binds the scope variable to the evaluation of the expression passed in the attribute. You can use string expressions to get literals, like color: "=" and then have <span color="'green'"></span>

Using & binds the scope variable to the function that is passed in the attribute. Doing something like click: '&' and then <span click="clickMe()"></span> will make scope.click() fire off clickMe().

This question has some more info and links to other resources that go into more detail.

Why does @ bind this AngularJS attribute but = does not?

2 Answers2