javascript - 将 CSS 值从 ng-repeater 传递到外部元素。

Question

如何将值从我的ng-repeater 传递到外部 元素？

比方说，我有这个简单的 ng-repeater，带有 ng-click 函数，它会根据索引值返回不同的值。

<data ng-repeat="x in array">
  <a href ng-click="move_arrow={left: arrowvalue($index)}">
     {{ x }} 
  </a>
</data>

arrowvalue 例如可能是这样的。

  $scope.arrowvalue = function(value){
        if (value == 0){ return '10%' }
        else if (value == 1){ return '20%' }
        else {return '100%' }
    }

因此，如果我想在范围(ng-repeat)之外使用“move_arrow”，我该如何将该值传递给 ng-style。

<span ng-style="move_arrow"></span>

我注意到如果带有“move_arrow”的跨度在中继器内部，则值会被传递，但是当它在外部时则不会传递

Answer 1

因为 move_arrow 在 ng-repeat 内部，它的作用域只能在里面使用。如果你想在 ng-repeat 之外使用它，那么你可以像这样创建另一个 $scope 变量:

$scope.arrowvalue = function(value){
        if (value == 0){ 
            $scope.outerStyle={left:'10%'};
            return '10%' }
        else if (value == 1){
            $scope.outerStyle={left:'20%'};
            return '20%' }
        else {
              $scope.outerStyle={left:'100%'};
            return '100%' }
    }

并在 span 中使用 $scope.outerStyle 变量