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'
    })

我的Index.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);
        ...
      }
    }
 }

和 updateView 功能

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

有关详情，请参阅 GitHub上的完整源代码 - viewDirective.js

Answer 2

为什么要两次接听电话？

我确定您的serach.html页面再次包含ui-view，正在调用尝试加载视图，最后$emiting $viewContentLoaded ui-view事件。简单地在html上呈现的$emit数量肯定是$viewContentLoaded $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ ///...code here });事件{/ 1}}。

由于你想确保你的事件只能被调用一次，所以你应该将事件放在$ stateChangeSuccess上，这将确保在所有ui-views通过状态加载后它只被触发一次。

<强>代码

--declare table variable
declare @tableA table (ID int, DateValue varchar(50))
DECLARE @Month int
DECLARE @Day int
DECLARE @Year int


--insert sample values into table variable
insert into @tableA VALUES 
(1,'011212'),
(2,'011549'),
(3,'070860')

begin

select ID,
       DateValue,
       (CONVERT(varchar(4), CASE 
            WHEN CAST(SUBSTRING(DateValue, 5, 2) AS int) > 88 THEN 1900 + CAST(SUBSTRING(DateValue, 5, 2) AS int)
            ELSE 2000 + CAST(SUBSTRING(DateValue, 5, 2) AS int)
    END)
    + '-' + SUBSTRING(DateValue, 1, 2) + '-' + SUBSTRING(DateValue, 3, 2))
 as ConvertDateValue 
 from @tableA 
end

Answer 3

当 SearchCtrl 被调用两次时会发生这种情况。

e.g。

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

并在 index.html

中

<body ng-controller="SearchCtrl">
    <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>
</body>

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

3 个答案:

为什么要两次接听电话？