0

我对 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
            }
        };
    })
4

1 回答 1

1

正如评论中提到的，使用$timeout解决了这个问题。
但为什么 ？

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

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

这当然不是解决问题的可靠（或推荐）方法，它只是为了解释正在发生的事情。Using$timeout将操作放入浏览器的事件队列中，因此该命令将在 Angular 当前的 $digest 循环完成后处理（即在 Angular 的异步队列上的所有任务都已处理并且所有任务由这些异步任务添加到队列等之后）。
（这里的另一个副作用是，由于渲染引擎的“渲染”命令已经在浏览器事件队列中，using$timeout将在下一次 DOM 渲染发生后执行该命令。这与这种特殊情况无关，但可能在其他情况下很重要。）

另请参阅说明这两种方法的简短演示（打开 DevTools 控制台）。

于 2014-06-09T10:11:10.097 回答