Question

我目前在构建议程方面有几个ng-repeats。每当我有一个ng-repeat时，我可以包含一个指令，检查ng-repeat是否完成以触发方法。工作完美......

问题是，我喜欢5 ng重复，我不想包含所有5 ng重复的指令，并检查方法是否所有5个调用方法... 我只是想要一种方法来检测我的所有ng-repeats（以及其他角度内容）是否已完成构建视图，例如我可以通过JQuery将约会放入议程中。因为当然，在议程（div）创建之前将约会置于议程（div）中是不可行的。

提前致谢！

更新：

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

所以我需要一些触发的视图已完成生成（必须完成所有重复），这样我才能开始预约。

Answer 1

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

在控制器中添加

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

Answer 2

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

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

Answer 3

最好不要使用jQuery来填充议程，而是使用Angular。这使您可以等到加载数据，这更容易检测，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>

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

等待加载所有数据，然后使用$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
        });

听取$viewContentLoaded，但这只有在您使用ng-view时才有效，如果您的数据是异步加载的话，可能会过早启动（我不完全确定此处的详细信息，因为我通常会避免检测视图的加载时间。）
如果上述所有方法都失败了，您可以不断检查页面上是否加载了所需的元素。

Answer 4

您可以使用angularjs指令来制作它。使用指令，您可以为任何dom元素设置ready事件。

有关详细信息，请参阅此 post 和 question 。

角度检测视图是否完成

4 个答案: