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

原因是=用于绑定属性值中包含的父范围中的变量

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

如果你这样做，=就可以了：

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

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

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

Answer 2

指令绑定对它们的解释方式有不同的方法。

使用@表示范围变量绑定到作为该属性传递的字符串文字值。因此，使用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有更多信息和指向更详细的其他资源的链接。

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

2 个答案: