Question

如果定义了一个指令，那么通过在其上定义的属性传递给它的范围是否可以在该指令中使用以获得模板中使用所需的结果？即我有这样的指示

var carAuction = angular.module('carAuction');

carAuction
    .controller('mainCtrl', function($scope)
    {
        var car = {
            comments: []
        };

        car.comments.push({
            comment: 'Ok car',
            rating: 1
        });

        car.comments.push({
            comment: 'Nice car.',
            rating: 2
        });

        car.comments.push({
            comment: 'Awesome car!',
            rating: 3
        });

        $scope.car = car;
    })
    .directive('carCommentRaiting', function()
    {
        return
        {
            restrict: 'E',
            templateUrl: 'path/to/template.html',
            scope:
            {
                value: '=value',
                maxValue: '=max-value'
            }
        };
    })
    .filter('range', function()
    {
        return function(input, total)
        {
            total = parseInt(total);

            for (var i=1; i<=total; i++)
            {
                input.push(i);
            }

            return input;
        };
    });

在html部分我有

<div>
    <div ng-repeat="comment in car.comments">
        Rating: <car-comment-raiting value="comment.rating" max-value="10"></car-comment-raiting>
    </div>
</div>

template.html

<div>
    <ul class="list-inline">
        <li ng-repeat="n in [] | range:value"><span class="glyphicon glyphicon-star"></span></li>
    </ul>
</div>

我想将额外的值传递给模板，该模板应计算为maxValue - value。没有找到任何描述它的例子。考虑使用link属性，但描述告诉它，它用于其他目的。

UPD： 我能用

修复它

return {
    restrict: 'E',
    templateUrl: 'path/to/template.html',
    scope:
    {
        value: '=',
        maxValue: '='
    },
    controller: function($scope)
    {
        $scope.calculated = $scope.maxValue - $scope.value;
    }
};

但由于某种原因它不能一直工作。一次有效，另一次calculated变量为null。

Answer 1

所有计算必须在指令链接函数内或控制器中完成。这是带指令的示例：

.directive('carCommentRaiting', function() {
        return {
            restrict: 'E',
            template: 'path/to/template.html',
            scope: {
                value: '=value',
                maxValue: '=max-value'
            },
            link : function(scope, element, attr) {
                 scope.calculated = scope.maxValue - scope.value;
                 /// watch value to update calculated on value update:
                 scope.$watch('value', function(newValue){
                      scope.calculated = scope.maxValue - newValue;
                 });
            }
        };
    });

可以在指令内使用指令隔离范围进行计算

1 个答案: