37

我正在尝试找到在与自定义指令一起使用的 ngRepeat 中获取索引位置的最佳方法。我要解决的问题是，对于 ngRepeat 的每次迭代，我想知道我在迭代中的位置，以便我可以根据该索引位置创建自定义模板。

除非有更好的方法可以做到这一点，否则我正在尝试根据指令中的此文档执行此功能：

& 或 &attr - 提供一种在父作用域的上下文中执行表达式的方法。如果未指定 attr 名称，则假定属性名称与本地名称相同。给定范围的小部件定义：{ localFn:'&myAttr'}，则隔离范围属性 localFn 将指向 count = count + value 表达式的函数包装器。通常希望通过表达式将数据从隔离范围传递到父范围，这可以通过将局部变量名称和值的映射传递到表达式包装器 fn 来完成。例如，如果表达式是 increment(amount)，那么我们可以通过将 localFn 调用为 localFn({amount: 22}) 来指定数量值。

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

我很难理解这句话到底在告诉我什么。所以，我试图做的是......

首先，在“testTemplate”中将 ngRepeat 指令与我的指令一起使用：

<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);
                }
            }
        });

现在最后，我试图在控制器中为引用指令的父模板定义“测试”函数。

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

所以第一个问题是我在父级中的“测试”函数根本没有被执行。也许我不明白应该如何调用父控制器中的测试函数。现在我实际上也没有增加，但是如果我可以触发测试功能，当我到达那个点时，我会增加计数的正确方法是什么？

4

2 回答 2

51

而不是scope.$parent.$index您可能会考虑将 $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) {
            // ...
        }
    }
});

小提琴。

于 2013-01-03T16:02:24.497 回答
1

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

为什么你的测试功能没有触发，你没有执行它。在指令的链接功能中，您需要以下内容：

scope.$eval(attrs.myAttr);
于 2013-01-03T06:44:59.777 回答