AngularJS ng-repeat jQuery find只返回一个元素 [英] AngularJS ng-repeat jQuery find returns only one element

问题描述

我正在开发我的第一个AngularJS应用程序，并遇到了jQuery查找功能的这个问题。基本上我要做的是，我有一个自定义的HTML组件。它包含使用ng-repeat指令的按钮列表。每个人都有自己的ng-click监听器，在它的回调中我想找到所有app-item元素，但遗憾的是它只返回第一个。

I am developing my first AngularJS app, and came across this problem with jQuery find function. Basically what I am trying to do, is that I have an custom HTML component . It contains list of buttons using ng-repeat directive. Each has it's own ng-click listener, and in it's callback I want to find all app-item elements, but sadly it only returns me the first one.

我认为这是我应该使用链接的情况，但我不能自己来。

I think this is the case I should use link, but I cannot come with it myself.

app-screen.html的一部分：

Part of app-screen.html:

<div>    
    <div ng-repeat="error in _errorData.errors">
        <button class="app-item" ng-click="_onApplicationContainerClick($event)">
            <div class="col-xs-4">
                {{error.date}}
            </div>
            <div class="col-xs-4">
                {{error.errorID}}
            </div>
            <div class="col-xs-3">
                {{error.message}}
            </div>
            <div class="col-xs-1">
                <span class="glyphicon glyphicon-collapse-down"></span>
            </div>
        </button>
    </div>
</div>

AppScreen指令：

AppScreen directive:

angular.module('ErrorViewer').directive('appScreen', function () {
    return {
        restrict: 'E',
        templateUrl: 'src/view/scene/app-screen.html',
        controller: 'AppScreenController'
    };
});

AppScreenController的一部分：

Part of AppScreenController:

$scope._onApplicationContainerClick = function (e) {
    // some executions
    _collapseErrorData();
};

var _collapseErrorData = function () {
    var elems = $element.find( '.app-item' );
    // Should return array of ng-repeated elements!
}

推荐答案

ng-repeat在渲染阶段（正在执行$ watch处理程序时）。在编译和链接阶段，您只能访问模板。这就是你只看到一个元素的原因。

ng-repeat is rendered during the render phase (when the $watch handlers are being executed). During the compile and link phases, you only have access to the template. That is the reason you're only seeing one element.

要挂钩到渲染后阶段，你可以使用$ timeout：

To hook into the after-render phase, you can use $timeout:

app.controller('AppScreenController', function($scope, $timeout) {
     var _collapseErrorData = function () {
        $timeout(function() {
            var elems = $element.find( '.app-item' );
            // Should return array of ng-repeated elements!
        });
     }
});

这篇关于AngularJS ng-repeat jQuery find只返回一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！