指令范围始终为空答案

【问题标题】：Directive Scope always empty指令范围始终为空
【发布时间】：2015-04-28 00:45:41
【问题描述】：

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 获取了 rank 属性（检查 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
    };
});

【问题讨论】：

您违反了 .统治这里。见这里：jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
请提供使用该指令的html代码

标签： javascript angularjs directive

【解决方案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);
};

更新的小提琴： 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"

【讨论】：

不过，当我写到完整的demo不行时，我会放一个在线demo

【解决方案2】：

您将作用域属性定义为 rank，但在链接函数中您引用了一个名为 ranking 的变量

【讨论】：