为什么 @ 绑定此 AngularJS 属性而 = 不绑定？

Question

为什么在下面的代码中 color: "@" 有效但 color: "=" 无效？

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>');
        }
    };
});

Answer 1

指令绑定有不同的解释方式。

使用 @ 意味着范围变量绑定到作为该属性传递的字符串文字值。因此，使用 color: '@' 将范围变量 color 绑定到 color="green" 的确切值，即 scope.color == "green" // this evaluates to true

使用= 将作用域变量绑定到属性中传递的表达式的求值。您可以使用字符串表达式来获取文字，例如 color: "=" 然后 <span color="'green'"></span>

使用& 将范围变量绑定到属性中传递的函数。执行类似 click: '&' 然后 <span click="clickMe()"></span> 的操作将使 scope.click() 触发 clickMe().

This question 有更多信息和指向更详细的其他资源的链接。

Answer 2

原因是 = 用于绑定到包含在属性值

中的父作用域中的变量

您的颜色值不是父范围（控制器）中的范围变量，它们只是您用例中的字符串。控制器中没有要绑定的 $scope.green 或 $scope.blue。

如果您这样做，= 会起作用：

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

然后十六进制值将在指令范围内使用。

@ 只会获取字符串值并将其传递给指令范围

为什么 @ 绑定此 AngularJS 属性而 = 不绑定？

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

angularjs

angular-directive