javascript - 指令范围始终为空

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

我的指令有效，实际上它执行了链接函数，但是变量 className 没有被填充，即使 $scope 获得了等级属性(检查 console.log)，当我访问它时 $scope .rank 返回空字符串。

这里发生了什么？

更新

查看完整 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

你打错了，你用了 $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 属性绑定(bind)到 scope。通过检查 $attrs.score，您实际上是在检查这个结果:"local.promedio_general"