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%' }
    }

所以如果我想在范围之外使用' move_arrow '（ng-repeat），我该如何将该值传递给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 varible

Answer 2

我之前回答了一个非常类似的问题。答案在这里：

Set $scope var in directive in ng-click

基本上你说n-ng和ng-repeat都会创建一些奇怪的东西来创建自己的范围。你可以使用$ parent范围，但是你可以解决这个问题的最好方法是在你的控制器中创建一个函数并调用该函数而不是内联函数。

所以你的ng-click看起来像是：

<a href ng-click="setStyle(arrowvalue($index))">

在你的控制器中，你会有类似的东西：

$scope.setStyle = function(value) {
    $scope.move_arrow = {'left': value};
};

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

2 个答案: