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

我正在构建一个与此类似的仪表板

我正在实现屏幕截图中显示的右侧边栏

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

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

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

我看到了许多日志

“addSideBarToggleClass”

，

“getStatusClass”

，每次我点击

openChat

，我都会看到一个日志

“openChat”

，然后再次点击

“addSideBarToggleClass”

和

“getStatusClass”

---

有人能指出这种行为可能存在的问题吗？

你需要熟悉角度的概念

简言之，每次运行摘要循环时，Angular都会对所有表达式（例如，

{{name}}

或

ng show=“isActive&&isEnabled”

）求值（有时不止一次）。这意味着，如果在表达式中调用函数：

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

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

---

每当Angular中的某些东西调用

$scope.$digest

时，摘要循环就会运行，默认情况下，这会发生在

ng click

或

ng change

或

$http.然后，

，等等..

太多的代码无法通过。削减开支，以摆脱一切无关紧要的东西，而这些似乎是其中的大部分。如果人们不必阅读太多内容，甚至不必找出问题所在，他们会更快地尝试找出答案。@sethflowers:好的……我正在删除我认为不应该成为问题的代码。@sethflowers:我已经更新了代码。如果还有什么需要改进的地方，请告诉我done@dark_shadow，还是太多了。你应该能够自己减少这个问题。我们需要所有的样式标记吗？我们需要所有这些特定于应用程序的功能吗？除了在视图中有一个

console.log

之外，我们还需要其他功能吗？@NewDev:我已经重新迭代了代码以减少它。请看一下，让我知道它是否还需要改进？首先，非常感谢。您向我展示了如何只发布问题的相关代码。一个简单的问题，正如您提到的，在诸如ng click或ng change之类的事情上会发生摘要循环，那么在其他视图中也会遇到这种情况吗？我的web应用程序中有很多视图，但只有在这个嵌套视图中才会注意到这一点。是否只有在嵌套视图中才会发生这种情况？另外，既然我的实际事件（如滚动）发生在页面上，为什么它会再次更改侧边栏视图？我可以做些什么来解决这个问题吗？@dark_shadow，也许其他视图没有$watched函数，例如，

{{{someFunction（）}}

，就像您在这个视图中所做的那样，所以您看不到它们正在被调用。我不确定我是否明白你的最后一个问题，但我能做些什么来解决它吗？我最后一个问题的意思是如何抑制这种行为？此外，我应该试着抑制这一点，还是这是angularjs的预期行为？此外，如果这种预期的行为不应该发生，这将导致性能下降，因为每次您都在观察函数？@dark_shadow，这就是Angular的工作原理-它会进行“脏检查”，以跟踪$wasted表达式更改了返回值的内容。Angular应用程序中最重要的性能因素是$digest循环，它取决于$watched表达式的数量和执行一个表达式所需的时间。所以，$watched函数必须非常快——几乎是getters——而且绝对不会执行任何循环或异步调用。非常感谢您的帮助。现在我明白了。这就是为什么我没有看到ng-click（）函数的任何日志。我认为$watched表达式不包括ng-click（）/ng-submit（）事件。如果我错了，请纠正我。此外，如果你能为我指出一些提高angular应用程序性能的好技巧，以及如何避免使用$watched表达式，那将是非常棒的。另外，我们可以增加$digest事件发生的时间吗？也许它可以包括一些优化？

<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>

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

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