Question

的仪表板

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

我的应用程序代码结构类似于：

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的概念。

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

<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等内容。

视图一次又一次初始化

1 个答案: