- 首页
- 前端开发
- AngularJS ng-repeat jQuery find 只返回一个元素
AngularJS ng-repeat jQuery find 只返回一个元素
[英] AngularJS ng-repeat jQuery find returns only one element
本文介绍了AngularJS ng-repeat jQuery find 只返回一个元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发我的第一个 AngularJS 应用程序，并在使用 jQuery find 函数时遇到了这个问题.基本上我想要做的是我有一个自定义的 HTML 组件.它包含使用 ng-repeat 指令的按钮列表.每个都有自己的 ng-click 侦听器，在它的回调中我想找到所有 app-item 元素，但遗憾的是它只返回第一个.
我认为这是我应该使用link的情况，但我不能自己带.
app-screen.html 的一部分:
<div ng-repeat="_errorData.errors 中的错误"><button class="app-item" ng-click="_onApplicationContainerClick($event)"><div class="col-xs-4">{{error.date}}
<div class="col-xs-4">{{error.errorID}}
<div class="col-xs-3">{{错误信息}}
<div class="col-xs-1"><span class="glyphicon glyphicon-collapse-down"></span>
AppScreen 指令:
angular.module('ErrorViewer').directive('appScreen', function () {返回 {限制:'E'，templateUrl: 'src/view/scene/app-screen.html',控制器:'AppScreenController'};});
AppScreenController 的一部分:
$scope._onApplicationContainerClick = function (e) {//一些执行_collapseErrorData();};var _collapseErrorData = 函数 () {var elems = $element.find( '.app-item' );//应该返回 ng 重复元素的数组！}
解决方案
ng-repeat 在渲染阶段(当 $watch 处理程序被执行时)被渲染.在编译和链接阶段，您只能访问模板.这就是您只看到一个元素的原因.
为了进入渲染后阶段，你可以使用 $timeout:
app.controller('AppScreenController', function($scope, $timeout) {var _collapseErrorData = 函数 () {$超时(功能(){var elems = $element.find( '.app-item' );//应该返回 ng 重复元素的数组！});}});
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.
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 directive:
angular.module('ErrorViewer').directive('appScreen', function () {
return {
restrict: 'E',
templateUrl: 'src/view/scene/app-screen.html',
controller: '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 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.
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屋！
