角度检测视图是否完成

Question

我目前有几个 ng-repeats 用于构建议程。每当我有一个 ng-repeat 时，我都可以包含一个指令，检查是否完成了 ng-repeat 以触发一个方法。完美运行...

问题是，我有 5 个 ng-repeats，我不想包含所有 5 个 ng-repeats 的指令并检查方法，如果所有 5 个都调用了该方法... 我只是想要一种方法来检测我所有的 ng-repeats（和其他有角度的东西）是否已经完成了视图的构建，例如我可以通过 JQuery 将约会放在议程中。 因为当然，在创建议程 (div) 之前将约会放入议程 (div) 是行不通的。

提前致谢！

更新：

我正在使用 REST 后端来获取约会。所以我不能只检索约会并尝试在议程中显示它们，因为视图可能没有完成生成（使用 ng-repeats）....

所以我需要一些可以触发视图的东西（必须完成所有 ng-repeats），这样我就可以开始安排约会了。

Answer 1

您应该使用$viewContentLoaded 而不是任何指令，因为它会在视图中的所有内容加载后触发。 文档： https://docs.angularjs.org/api/ngRoute/directive/ngView

代码示例： $scope.$on('$viewContentLoaded', function(event) { // Your Code Goes Here }); 请注意，这仅在您使用路由中的ng-view 时才有效。

Answer 2

在 Angular 中有一个技巧，使用 $timeout 来延迟代码某些部分的执行，直到所有指令都重新执行。我不确定它在这种情况下是否有效，但您可以尝试。

在你的控制器中简单地添加

$timeout(function() {
  // code to execute after directives goes here
});

Answer 3

您最好不要使用 jQuery 来填充议程，而是使用 Angular。这允许你等到 data 被加载，这更容易检测到，并且 Angular 会确保 DOM 在它可以这样做的时候被上传。

在您的情况下，您可能可以这样做：

控制器：

$scope.days = [];
//Here we create the days for the calendar (7 in this case)
for (var i = 0; i < 7; i++) {
    var hours = [];
    //and the hours, with an empty appointment array for each hour
    for (var i = 0; i < 24; i++) {
        hours.push({ appointments: [] });
    }
    $scope.days.push({
        hours : hours
    }); 
}
//Then we can get the appointments from your api
getAppointments().then(function(appointments) {
    //and add the results to the arrays created above
    appointments.forEach(function(appointment) {
        //This is some simplified logic that only uses the day of the week
        //and hour of the appointment. Your logic would probably a bit more complex 
        //to properly put the appointment in the correct array
        var day = appointment.date.getDay();
        var hour = appointment.date.getHour();
        $scope.days[day].hours[hour].appointments.push(appointment);
    });
});

模板：

<div class="days" ng-repeat="day in days">
    <div class="hours" ng-repeat="hour in day.hours">
        <!-- I assume you have one hours div in which all appointments for that hour will go -->
        <div class="appointments" ng-repeat="appointment in hour">
            {{ appointment.title }}
        </div>

    </div>
</div>

也就是说，如果您真的想检测视图何时完成加载，那么您有几个选择：

1. 等待所有数据被加载，然后使用$timeout 确保它已被渲染。

看起来像这样：

var somePromise = getPromise();
var someOtherPromise = getOtherPromise();
$q.all([somePromise, someOtherPromise])
    .then(function() {
        //At this point all data is available for angular to render
        $timeout(function() {
            //and now everything should actually be rendered
        });

1. 收听$viewContentLoaded，但这仅在您使用ng-view 时有效，并且如果您的数据异步加载可能会过早触发（我不完全确定此处的详细信息，因为我通常会避免检测视图何时加载）。

2. 如果上述所有方法都失败了，您可以不断检查页面上是否加载了所需的元素。

Answer 4

你可以使用 angularjs 的指令来制作它。使用指令可以为任何 dom 元素设置就绪事件。

有关详细信息，请参阅这篇出色的 post 和 question。