视图一次又一次地被初始化

Question

我正在构建一个类似于Admin Dashboard Theme的仪表板

我正在实现右侧边栏，如屏幕截图中所示

我的 App 代码结构是这样的：

index.html:
<div ui-view=""></div> 

main.html
<div ui-view=""></div> 
<div ng-include='"app/dashboard/sidebar.html"'></div> 

我在 main.html 中完成了视图的嵌套，我在其中注入了不同的视图。此外，由于我的右侧边栏是固定的，我希望它在所有主要视图中都是通用的。所以，我刚刚将它包含在我的 main.html 中。

现在，无论我向下滚动页面还是在侧边栏中执行任何操作，问题都以某种方式一次又一次地初始化我的 sidebar.html。我已经通过为 sidebar.html 视图中使用的每个控制器功能打印控制台日志来验证它。

这个问题与我的post有关：之前，我无法弄清楚实际问题。

以下是我的控制器和玉代码：

angular.module('myApp')
  .controller('SidebarCtrl', function($scope, $rootScope) {
    $scope.message = {};

    $scope.addSideBarToggleClass = function() {
      console.log("addSideBarToggleClass");
      return true;
    }

    $scope.getStatusClass = function(status) {
      console.log("getStatusClass");
      return 'is-online';
    }

    $scope.openChat = function(receiver) {
      console.log("openChat");
    }

    // etc...

  });

<aside ng-class="{ 'control-sidebar-open' : addSideBarToggleClass()}" 
       ng-controller="SidebarCtrl">
  <ul>
    <li ng-class="{active: isTabSelected('chat')}">
      <a data-toggle="tab" ng-click="updateCurrenTab('chat')"></a>
    </li>
    <li ng-class="{active: isTabSelected('home')}">
      <a data-toggle="tab" ng-click="updateCurrenTab('home')"></a>
    </li>
  </ul>
  <div>
    <div ng-class="{active: isTabSelected('home')}">
      <h3>Recent Activity</h3>
    </div>
    <div ng-class="{active: isTabSelected('chat')}">
      <div>
        <h4>Chat {{noOfUsersOnline}}</h4>
        <div>Friends
          <a href="#" ng-repeat="user in users" ng-click="openChat(user)"> 
           <span ng-class="getStatusClass(user.status)"></span>
           {{user.name}}</a>
        </div>
      </div>
    </div>
  </div>
</aside>

我看到很多"addSideBarToggleClass"、"getStatusClass" 的日志，每次点击openChat，我都会看到"openChat" 的日志，然后又看到"addSideBarToggleClass" 和"getStatusClass" 的日志

谁能指出这种行为可能存在的问题？

Answer 1

您需要熟悉 Angular 中 digest loop 的概念。

简而言之，每次摘要循环运行时，所有表达式，例如{{name}} 或 ng-show="isActive && isEnabled"，被 Angular “$watched”评估（有时不止一次）。这意味着如果您在表达式中调用函数：

<div ng-show="isShown()">

$scope.isShown = function(){
   console.log("expect to see this text a lot of times");
   return true;
};

该函数将在每个摘要循环上执行。

在 Angular 中调用 $scope.$digest 的任何时候都会运行摘要循环，默认情况下会发生在 ng-click 或 ng-change 或 $http.then 等事物上。