angularjs - Angular JS viewContentLoaded 在初始主页加载时加载两次

Question

我注意到在我最初的主页加载时，我的 viewContentLoaded 触发了两次，这是为什么？

app.run(function 
    ($rootScope,$log) {
      'use strict';
      $rootScope.$state = $state;
      $log.warn("gets here");

      $rootScope.$on('$viewContentLoaded',function(){
        $log.warn("gets here2");
      });
    });

页面加载输出

"gets here" 
"gets here2" 
"gets here2"

我的路由如下

$urlRouterProvider.when('', '/');

  // For any unmatched url, send to 404
  $urlRouterProvider.otherwise('/404');

  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'views/search.html',
      controller: 'SearchCtrl'
    })

我的索引.html

  <div id="canvas">
    <ng-include src="'views/partials/header.html'"></ng-include>
    <!-- container -->
    <div ui-view ></div>
    <!-- /container -->
    <ng-include src="'views/partials/footer.html'"></ng-include>
  </div>

Answer 1

它只是 uiView 指令实现的细节。它会触发 $viewContentLoaded 初始化(链接)阶段的事件。此时尚无状态，但事件仍被触发。

然后再次触发事件后 $state 服务实际上解决了您的 首页 状态，过渡到它，加载模板等。

总而言之，这不是因为配置不当，也不是因为您的模板被加载了两次。就是这样 uiView 作品。

你甚至可以通过完全注释掉你的状态定义和大部分 index.html 内容来验证它(除了 ui-view 本身)。 $viewContentLoaded 仍然会被解雇一次。

源代码摘录:

uiView 指令声明:

{
    restrict: 'ECA',
    terminal: true,
    priority: 400,
    transclude: 'element',
    compile: function (tElement, tAttrs, $transclude) {
      return function (scope, $element, attrs) {
        ...
        updateView(true);
        ...
      }
    }
 }

和 更新 View 功能

    function updateView(firstTime) {
      ...
      currentScope.$emit('$viewContentLoaded');
      currentScope.$eval(onloadExp);
    }

有关更多信息，请参阅 上的完整源代码GitHub - viewDirective.js