Question

问题：我有两个控制器Dog和Cat。如果我更改了狗的名字，那么$ digest循环运行，而且由于方法{{ctrl.getTime（）}}的使用，Cat也会在这里更新视图。对于加载所有控制器并且不使用ng-if或state的大型应用程序来说，这是一个大问题。在我们当前的应用程序中，我们有很多地方使用模板内部的方法，更糟糕的是我们加载并初始化所有应用程序控制器并且不使用状态或ng-if，我们只使用ng-show。我知道有什么更好的解决方案是使用属性，但我想知道是否有可能告诉angular只消化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();
    }
}

小提琴：http://jsfiddle.net/nvgofo46/1/

Answer 1

将您的HTML更改为：

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

将控制器更改为：

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

根据经验，尽量不要在视图中使用功能。因为函数将在每个摘要上执行。绑定到模型并相应地更新模型会更有效。

我可以删除该函数，只需设置this.currentTime = new Date（）。getTime（），但这不是本练习的重点。

AngularJs仅允许消化当前范围

1 个答案: