javascript - AngularJS ng-repeat jQuery find 仅返回一个元素

Question

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

我认为这种情况我应该使用链接，但我自己无法使用它。

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 指令:

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

AppScreenController 的一部分:

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

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

Answer 1

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

要进入渲染后阶段，您可以使用 $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!
        });
     }
});