javascript - AngularJs 允许仅摘要当前范围

Question

问题:我有两个 Controller :狗和猫。如果我更改狗名称，则 $digest 循环运行，并且由于方法 {{ctrl.getTime()}} 的使用，Cat 也会更新此处 View 。对于加载所有 Controller 并且不使用 ng-if 或 state 的大型应用程序来说，这是一个大问题。在我们当前的应用程序中，我们有很多地方使用模板内的方法，更糟糕的是，我们加载并初始化所有应用程序 Controller ，并且不使用状态或 ng-if，我们只使用 ng-show。我知道更好的解决方案是使用属性，但我想知道是否可以仅告诉 Angular 到 $digest DogCtrl 范围而不是所有应用程序范围？

HTML

<div ng-app="myApp">
    <div ng-controller="DogCtrl as ctrl">
        <h3>DogCtrl</h3>
        Dog name: <input ng-model="ctrl.name" />{{ctrl.name}}
    </div>
    <hr />
    <div ng-controller="CatCtrl as ctrl">
        <h3>CatCtrl</h3>
        Cat getTime: {{ctrl.getTime()}} {{ctrl.random}}
    </div>
</div>

Javascript

var myApp = angular.module('myApp',[]);
myApp.controller('DogCtrl', DogCtrl);
myApp.controller('CatCtrl', CatCtrl);

function DogCtrl() {
        this.name = 'Doggy';
}

function CatCtrl() {
        this.getTime = function() {
            return new Date().getTime();
    }
}

fiddle :http://jsfiddle.net/nvgofo46/1/

Answer 1

将您的 html 更改为:

<div ng-controller="CatCtrl as ctrl">
    <h3>CatCtrl</h3>
    Cat getTime: {{ctrl.currentTime}} {{ctrl.random}}
</div>

并将您的 Controller 更改为:

function CatCtrl() {
    this.getTime = function() {
      return new Date().getTime();
    }
    this.currentTime = this.getTime();
}

根据经验，尽量不要在您的 View 中包含函数。因为这些函数将在每个摘要上执行。绑定(bind)到模型并相应地更新模型会更有效。

我可以删除该函数并简单地设置 this.currentTime = new Date().getTime()，但这不是本练习的重点。