视图是越来越连连初始化 [英] View is getting initialized again and again

问题描述

我要建一个与此相似管理仪表板主题仪表板

我采取右侧的侧边栏显示的截图

I'm implementing the Right Side SideBar as show in the screenshot

我的应用code结构是这样的：

My App code structure is something like:

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

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

我在main.html中在那里我注入不同的观点进行嵌套的看法。此外，由于我的右手边栏是固定的，我希望它在所有的主要观点是共同的。所以，我刚才包括它在我的main.html中。

I have done nesting of view in my main.html where I'm injecting different views. Also, since my right side sidebar is fixed, I want it to be common in all the main views. So, I have just included it in my main.html.

现在的问题是不知我的sidebar.html是越来越再次初始化，再不管，如果我滚动我的翻页或执行侧边栏里面的任何行动。我已经通过打印控制台日志这是在sidebar.html视图中使用的每个控制器的功能验证它。

Now, the problem is somehow my sidebar.html is getting initialized again and again no matter if I scroll my page down or perform any action inside sidebar. I have verified it by printing console logs for every controller function which are used in sidebar.html view.

这问题与我的这个<一个href=\"http://stackoverflow.com/questions/31726805/how-to-stop-page-refresh-on-typing-in-form-input\">post:此前，我没能找出实际的问题。

This problem is related to my this post: Earlier, I wasn't able to figure out the actual issue.

以下是我的控制器和玉石code：

Following is my controller and jade code:

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>

我看我每次点击<$ C时间addSideBarToggleClass，getStatusClass以及许多日志$ C> openChat ，我看到一个日志openChat和然后再次addSideBarToggleClass和getStatusClass

I see many logs of "addSideBarToggleClass", "getStatusClass" and every time I click on openChat, I see a log of "openChat" and then again "addSideBarToggleClass" and "getStatusClass"

任何人都可以请指出什么可以为这种行为可能出现的问题？

Can anyone please point out what can be the possible problem for this behavior?

推荐答案

您需要熟悉了的消化循环的角度。

You need to familiarize yourself with the concept of a digest loop in Angular.

总之，每一个消化循环运行时间，所有前pressions，例如 {{名}} 或 NG-秀=isActive和放大器;＆安培; isEnabled，也正在$看了角由评估（有时不止一次）。这意味着，如果你调用一个前pression里面的函数：

In short, every time a digest loop runs, all expressions, e.g. {{name}} or ng-show="isActive && isEnabled", that are being "$watched" by Angular are evaluated (sometimes more than once). This means that if you are invoking a function inside an expression:

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

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

该函数将在每个循环消化来执行。

the function will be executed on every digest loop.

一个消化循环运行的任何时间的东西在角通话 $范围。$摘要，它默认的事情偏偏喜欢 NG-点击或 NG-变化或 $ http.then 等。

A digest loop runs any time that something in Angular calls $scope.$digest, which by default happens on things like ng-click or ng-change or $http.then, etc..

这篇关于视图是越来越连连初始化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！