Question

我对angular.js的第一次实验。

我有几个列，每个列都包含一些模板：

<div class="col-md-5 js-column" ng-repeat="orm in orms" repeat-done="equalHeight">
    <h2>{{ orm.name }}</h2>
    <ng-include src="'/inc/_compiled/'+orm.id+'.html'"></ng-include>
</div>

每个包含的模板包含与其他模板相同的元素，但它们的高度不同。示例元素：

<pre data-task="model" class="task-model">
from django.db import models
class Teacher(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)

</pre>

我想要实现的是为所有列中的特定元素设置相等的高度。这意味着所有pre.task-model都具有相同的高度。

我已经创建了一些指令，其目的是在ngRepeat循环结束后触发它（scope.$last）。但是当我尝试通过jQuery / DOM选择器访问包含的节点时，我什么也得不到。我知道每个模板都可以在element变量中使用，但我还需要获取其他列。

var ormApp = angular
    .module('ormApp', [])
    .directive('repeatDone', function () {
        return function (scope, element, attrs) {
            if (scope.$last) {
                $('.js-column pre.task-model'); //<- got nothing
            }
        };
    })

Answer 1

如评论中所述，使用$timeout解决了问题但为什么呢？

这里的问题是流程中涉及的几个操作，例如创建新元素（ngRepeat），使用ngInclude获取模板（$http.get()）（即使它来自$templateCache），解析返回的承诺等，是异步的，并使用$evalAsync()处理，这意味着它们将发生＆＃34;发生＆＃34;当处理当前在Angular的异步队列中的所有其他内容时。

由于有几个级别的嵌套$evalAsync（在这种特殊情况下为7），您可以通过迭代调用$evalAsync()来实现所需，直到获取和排列模板所需的异步操作为止完成。

这当然不是解决问题的强大（或推荐）方法，它只是用来解释发生了什么。使用$timeout将操作置于浏览器的事件队列中，因此在Angular的当前$ digest循环完成后（即在Angular的异步队列上的所有任务之后）将处理该命令已被处理，并且所有的人都被那些异步等等添加到队列中（这里的另一个副作用是，由于渲染引擎＆＃34;渲染＆＃34;命令已经在浏览器事件队列中，使用$timeout将在下一个DOM渲染后执行命令这与此特定情况无关，但在其他情况下可能很重要。）

另请参阅此 short demo ，说明两种方式（打开DevTools控制台）。

访问包含ng的DOM节点？

1 个答案: