指令作用域始终为空

Directive Scope always empty

本文关键字：作用域 指令      更新时间：2024-05-12

检查此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获得了rank属性（checkingconsole.log），当我访问它时，$scope.rank返回一个空字符串。

这里发生了什么？

更新

查看完整的演示

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

您有一个打字错误，您使用了$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"

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

相关文章：