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

我的指令Works，在deed中它执行链接函数，但变量className不会被填充，即使$ scope获取rank属性（检查console.log），当我访问它时{{1返回一个空字符串。

这里发生了什么？

更新

查看完整的demo

更新2 解决此问题

$scope.rank

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

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

Answer 2

您将scope属性定义为rank但在链接函数中引用了名为ranking的变量

指令范围始终为空

2 个答案: