指令范围始终为空

Question

勾选这个JSFiddle

app.directive('rateClass', function() {
    function link ($scope, $element, $attrs) {
        var className = '';
        if($scope.ranking > 9)
            className = 'ranked-excelent';
        else if($scope.ranking > 6)
            className = 'ranked-good';
        else if($scope.ranking > 3)
            className = 'ranked-regular';
        else if($scope.ranking > 0)
            className = 'ranked-bad';

        console.log($scope, className);
    };

    return {
        scope: {
            rank: '='
        },
        restrict: 'AEC',
        link: link
    };
});

我的指令有效，实际上它执行了 link 函数，但是变量 className 没有被填充，即使 $scope 获得了等级属性（检查 console.log），当我访问它 $scope.rank returns 一个空字符串。

这里发生了什么？

更新

查看全文demo

更新 2 用这个

解决了

app.directive('rateClass', function() {
    var getClass = function (val) {
        var className = 'not-ranked';
        if(val > 9)
            className = 'ranked-excelent';
        else if(val > 6)
            className = 'ranked-good';
        else if(val > 3)
            className = 'ranked-regular';
        else if(val > 0)
            className = 'ranked-bad';
        return className;
    }

    function link ($scope, $element, $attrs) {
        $scope.$watch($attrs.score, function (value) {
            $element.addClass(getClass(value));
        })
    };

    return {
        link: link
    };
});

Answer 1

您将范围属性定义为 rank 但在您的 link 函数中您引用了一个名为 ranking

的变量

Answer 2

你打错了，你用了 $scope.ranking 而不是 $scope.rank

function link ($scope, $element, $attrs) {
    var className = '';
    if($scope.rank > 9)
        className = 'ranked-excelent';
    else if($scope.rank > 6)
        className = 'ranked-good';
    else if($scope.rank > 3)
        className = 'ranked-regular';
    else if($scope.rank > 0)
        className = 'ranked-bad';

    console.log($scope, className);
};

已更新fiddle： http://jsfiddle.net/cobo3wzu/2/

注意：在您编辑的完整演示版本中，您应该输入：

    $scope.$watch('score', function (value) {
        value = parseFloat(value) || 0;
        $element.addClass(getClass(value));
    })

而不是：

    $scope.$watch($attrs.score, function (value) {
        value = parseFloat(value) || 0;
        $element.addClass(getClass(value));
    })

这是因为，在目录中，您将 score 属性绑定到 scope。通过检查 $attrs.score，您实际上检查的是这个结果："local.promedio_general"

指令范围始终为空

Directive Scope always empty

javascript

directive

angularjs