Question

我正在使用Angular构建一个Web应用程序，我正在尝试找到一种方法，等待所有data-ng-include元素都被评估并且包含已完成加载。例如，菜单是一个加载的视图，也是每个页面的主要内容，因此至少有两个data-ng-include被评估和加载。最重要的是，菜单包含嵌套的data-ng-repeat s，它构建了我的菜单。我需要一种方法来启动脚本，所有这些包括它们内部的任何角度函数，并且DOM已经准备就绪。

当Angular设置页面时，是否有任何事件被触发？

AnguarJS的实现是基本的，我们基本上通过使用data-ng-include将其用于模板化。每个页面都是一个视图（不是角度视图，只是一个html文件），通过data-ng-include加载，页眉和页脚在其上方和下方。标题还动态加载包含角度的全局视图（同样不是角度视图）html文件。

到目前为止，菜单是使用AngularJS进行模板以外的任何操作的唯一方法。它使用它来创建一个使用JSON对象的菜单，该对象由JSP动态生成并插入从服务器返回的DOM中。

为了让前端人员的生活更轻松，任何类型的重复JavaScript功能都被编码到模块中，这些模块在页面加载时检测到并使用JavaScript功能需要的元素上的data-features属性动态加载附上。

例如，您可能有<div id="mySubMenu" data-features="subMenu"></div>。在页面加载时，检测到具有data-features元素的每个元素，并加载相关的JS模块，在这种情况下，我们将加载/scripts/modules/subMenu.js。

我需要的是一种延迟运行此特征检测和附件的方法，直到包含或其他角度函数产生的所有元素都在页面上并准备好被操作，特别是因为可能存在具有数据特征的元素这些中的属性包括。

其他地方有人曾提到将控制器放在身体上并放置任何一面但是：

$scope.$on('$viewContentLoaded', function() {
    // Init Features Here
});

那不行，所以我在这里寻找其他选择。

我最终在这个问题中使用了Theo的解决方案：Sending event when angular.js finished loading

Answer 1

加载内容

：

$rootScope.$on('$includeContentLoaded', function() {
    //do your will
});

请求的内容：

$rootScope.$on('$includeContentRequested', function() {
    //...
});

Answer 2

我确信这不是正确的做法，但......

将以下函数放在我的视图控制器中，在我的应用程序中加载视图后运行该函数。我认为该函数在视图加载后的下一个摘要周期中运行（如果错误，请在此处更正），因此在页面形成后运行。

setTimeout(function(){
  //do this after view has loaded :)
  console.log('success!');
}, 0);

在每个视图setTimeouts返回后，你可以通过回调链接这些和/或使用异步并行库来执行另一个函数。

Answer 3

我认为合适的答案是否定的。你必须改变你看待你的应用程序和模型的方式，并使其适应“角度方式”。最有可能有一种更健康的方式来实现您的需求。如果您需要将事件附加到元素，可能您可能想要使用指令，但当然我没有足够的信息来判断在这个阶段什么是最好的。

angular.module和指令是一个很好的选择。

这是一个关于如何使用JQUERY插件的插件演示：

http://plnkr.co/edit/WGdNEM?p=preview

以下是一个带有指令的示例：

http://plnkr.co/edit/YNBSWPLeWqsfGvOTwsMB?p=preview

Answer 4

您可以使用JQuery Promise，并在角度根控制器中实现此承诺。在角度控制器或jquery代码运行之前设置promise：

cvApp.factory("experienceService", ["$rootScope", function($rootScope) {
      var svc = {};

      var message = [
      ....  
       {
          name: "Azure",
          genre: ".net",
          rate: "4"
        }];

        svc.getExperience=function(){
          return message;
        };
       ....

    }]);

一切准备就绪后，在角度控制器内部，执行

var AppReadyDeferred = $.Deferred();
var AppReadyPromise = AppReadyDeferred.promise();

在你的jQuery代码中等待它被解析

AppReadyDeferred.resolve();

Answer 5

使用ng-cloak延迟编译前显示的模板。您还可以添加一个隐藏字段作为具有ng-cloak的html元素的最后一个子元素（最好在body标签或ng-app启动的任何地方使用它）然后您可以检查是否存在此隐藏元素区间循环

您隐藏的字段部分将是这样的

<div ng-include="'ngtplhidden'"></hidden>
<script type="text/ng-template" id="ngtplhidden">
<span id="elemidToCheckInAnIntervalFunc"></span>
</script>

Answer 6

您可以尝试使用document.onreadystatechange

document.onreadystatechange = x => {
    console.log('ready!');
}

角度完成后运行Javascript加载所有视图

6 个答案: