在angularjs指令中的$ index of ngRepeat

Dav*_*idB 35 angularjs ng-repeat

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

除非有更好的方法,否则我试图根据指令中的这些文档来执行此功能:

&or&attr - 提供在父作用域的上下文中执行表达式的方法.如果未指定attr名称,则假定属性名称与本地名称相同.范围的给定和窗口小部件定义:{localFn:'&myAttr'},然后隔离范围属性localFn将指向count = count + value表达式的函数包装器.通常需要通过表达式将数据从隔离范围传递到父范围,这可以通过将局部变量名称和值的映射传递到表达式包装器fn来完成.例如,如果表达式是increment(amount),那么我们可以通过将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>
Run Code Online (Sandbox Code Playgroud)

接下来,我的指令定义:

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);
                }
            }
        });
Run Code Online (Sandbox Code Playgroud)

最后,我正在尝试在控制器中为引用该指令的父模板定义"test"函数.

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

所以第一个问题是父进程中的"test"函数根本没有被执行.也许我不理解如何调用父控制器中的测试功能.现在我实际上也没有增加,但是如果我能够获得测试功能,那么当我达到这一点时,我会采用正确的方法增加计数吗?

Mar*_*cok 50

而不是scope.$parent.$index你可能会考虑将$ index作为指令属性传递:

<li my-directive index="{{$index}}" ng-repeat="value in values">
Run Code Online (Sandbox Code Playgroud)

指示:

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

小提琴.

  • 值得注意的是:使用'@'语法,你必须使用attrs.$ observe()如果你想在链接函数中使用索引值 - 请参阅[this answer](http://stackoverflow.com/问题/ 14050195 /指令范围之间的差异/指令范围/ 14063373#14063373)了解更多信息.(如果您只使用模板中的值,则不需要使用$ observe(),就像我在小提琴中显示的那样.) (6认同)
  • 就个人而言,我仍然更喜欢范围.$ parent.$ index因为添加索引属性是用户在尝试使用您的指令时要记住的额外信息.使用范围.链接器中的$ parent.$ index不仅可以获得相同的结果,还可以通过减少不必要的属性来清除指令.以直观的方式设计指令使其易于被其他人重用 (2认同)
  • 值得注意的是,如果在该层次结构中不知不觉地引入新范围,例如使用ng-if或ng-repeat,使用$ parent访问父范围可能导致将来很难发现错误. (2认同)