Question

ng-repeat内的自定义指令显示非预期结果

我创建的指令可以接受不同的值，我称之为它和它的工作鳍，但是当我在ng-repeat中使用这个指令时，它会在每次迭代时显示相同的结果

这是指令：

.directive("rating", function () {
    return {
        restrict: "E",
        replace: true,
        scope: true,
        link: function ($scope, $element, $attrs) {
            $scope.flavor = $attrs.value;
            $scope.getStars = function () {
                var size = $scope.flavor / 5 * 100;
                return size;
            }
        },
        template: '<span ng-bind="getStars()"></span>'
    }
});

当我以这种方式调用它时它的工作正常并显示预期的结果

<rating value="1"></rating> // <span>20</span>
<rating value="2"></rating> // <span>40</span>
<rating value="3"></rating> // <span>60</span>

但是当我在ng-repeat中使用它时，每次迭代都显示相同的结果，即使值不同，因为它来自$ index。

<div ng-repeat="review in vm.reviews">
    <rating value="{{$index+1}}"></rating>  
</div>
// <span>20</span>
// <span>20</span>
// <span>20</span>

我希望结果是

// <span>20</span>
// <span>40</span>
// <span>60</span>

我认为$ scope.flavor中的问题应该有办法强制每次迭代更新

Answer 1

它适用于我的plunker example。所以你背后的某些事情你做错了。

但实际上我会以另一种方式做到这一点。如果您将某些内容传递给指令value=，则不需要在{{}}中包含$scope属性。只需将directive $scope隔离开，并明确指定value是表达式（'<'或'='）。

scope: {
  value: '<'
}

然后，您可以通过$scope.value功能中的link与其联系。这里也是plunker。

ng-repeat中的自定义指令显示了当我使用ng-repeat时的不同结果

1 个答案: