ngRepeat在angularjs指令內的$ index

我正在試圖找到最好的方法來獲取與自定義指令一起使用的ngRepeat中的索引位置。我試圖解決的問題是，對於ngRepeat的每次迭代，我想要知道我在迭代中的位置，以便可以基於該索引位置創建自定義模板。

除非有這樣做的更好的方法，我試圖在此基礎上從文件指令來執行此功能：

&或& ATTR - 提供了一種在上下文中執行一個表達式的父範圍。如果未指定attr名稱，則假定屬性名稱與本地名稱相同。給定範圍的小部件定義：{localFn：'& myAttr'}，然後隔離範圍屬性localFn將指向count = count + value表達式的函數包裝。通常希望通過表達式向父範圍傳遞來自獨立範圍的數據，這可以通過將局部變量名稱和值的映射傳遞到表達式包裝函數fn來完成。例如，如果表達式是增量（金額），那麼我們可以通過調用localFn作爲localFn（{amount：22}）來指定金額值。

http://docs.angularjs.org/guide/directive

我有一些困難，正是這一聲明是告訴我的理解。所以，我試圖做的是...

首先ngRepeat指令沿與我的「testTemplate」指令用於：

<ul> 
    <li my-attr="test()" my-directive ng-repeat="value in values" class="span2"> 
    </li> 
</ul>

接下來，我的指令定義：

angular.module('myModule', []) 
     .directive('myDirective', function() { 
      return { 
       replace : true, 
       transclude : true, 
       scope : { 
        test: '&myAttr' 
       }, 
       templateUrl: 'partials/myTemplate.html', 
       link : function(scope, element, attrs) { 
        alert(scope.count); 
       } 
      } 
     });

現在最後，我試圖在控制器中爲引用指令的父模板定義「test」函數。

function TestTemplateCtrl($scope, testTemplate) { 
    $scope.test = function() { 
     alert('in test'); 
     $scope.count = "1"; 
    } 
}

所以，第一個問題是，我的「測試」功能在父母根本沒有被執行。也許我不知道如何調用父控制器中的測試函數。現在我實際上並沒有增加，但是如果我能夠得到測試函數來觸發，那麼當我確實達到那一點時，我會如何正確地選擇增加計數？

來源

2013-01-03 DavidB

哇我覺得我讓這個更復雜，然後需要。我可以用scope。$ parent。$ index來獲取鏈接函數中的索引。我仍然想知道爲什麼我的「測試」功能不會觸發，只是爲了將來的參考。 – DavidB

相反的scope.$parent.$index你可能會考慮通過$指數作爲指令屬性：

<li my-directive index="{{$index}}" ng-repeat="value in values">

指令：

myApp.directive('myDirective', function() { 
    return { 
     replace: true, 
     // transclude: true, 
     scope: { 
      index: '@' 
     }, 
     template: '<div>testing {{index}}</div>', 
     link: function(scope, element, attrs) { 
      // ... 
     } 
    } 
});

Fiddle。

來源

2013-01-03 16:02:24

好的呼籲。這正是我想要做的。 – DavidB

值得注意的是：使用'@'語法，如果你想在鏈接函數中使用索引值，你必須使用attrs。$ observe（） - 參見[this answer]（http://stackoverflow.com /問題/ 14050195 /什麼是差異之間和指令範圍內/ 14063373＃14063373）更多信息。（如果你只使用模板中的值，你不需要使用$ observe（）。 –

個人而言，我更喜歡scope。$ parent。$ index，因爲添加index屬性是一個用戶在嘗試使用指令時需要記住的額外信息。在您的鏈接器中使用範圍$ parent。$ index不僅可以讓您獲得相同的結果，還可以通過減少此不必要的屬性來清除指令。以直觀的方式設計指令可以讓其他人輕鬆地重用 – zeroliu

正如您所指出的，您可以使用$ index獲取索引。

由於爲什麼你的測試函數沒有觸發，你沒有執行它。在你的指導的鏈接功能，你需要這樣的東西：

scope.$eval(attrs.myAttr);

來源

2013-01-03 06:44:59 asgoth

ngRepeat在angularjs指令內的$ index

回答

相關問題