AngularJs多个实例和嵌套控制器

时间:2014-03-23 09:55:00

标签: angularjs angularjs-scope

我对是否可以创建多个控制器实例以及以嵌套形式创建控件的方式感到困惑,例如 -

<div ng-controller="abc"> 
   <form ng-submit="call()">
       <input type=text ng-model="content"/>
   </form>
   <div ng-controller = "abc">
       <form ng-submit="call()">
            <input type=text ng-model="content"/>
       </form>
   </div>
</div>

我只是想知道,如果我使用与其他控制器实例相同的模型,那么模型值将相同或不同。与静态变量类似?

1 个答案:

答案 0 :(得分:5)

  

我只想知道如果我使用与其他实例相同的模型   控制器,所以模型值相同或不同。相近   静态变量?

ng-controller的所有声明都会创建一个新的控制器实例。所以,如果你有两个并排的实例,就像这样:

<div ng-controller="abc">
    <input type=text ng-model="content"/>
</div>
<div ng-controller="abc">
    <input type=text ng-model="content"/>
</div>

plunker

然后,每个$scope属性都是完全独立的。

当嵌套ng-controller时,其范围继承父控制器的范围。因此,对于此,您希望内容引用相同的范围属性:

<div ng-controller="abc">
    <input type=text ng-model="content"/>
    <div ng-controller="abc">
       <input type=text ng-model="content"/>
    </div>
</div>

plunker

但是,由于content没有直接在控制器中定义,所以会发生奇怪的事情。如果您先填写父input。两个输入都绑定到同一范围属性。但是,如果您先填写孩子input,他们就是独立的!

如果您在创建范围内的属性时理解Angular正在 lazy ,这可能会令人困惑。两个范围的content一开始为空。只有当它有一个值才会继承。

那么,如果你想把事情分开,你会怎么做?将初始值添加到控制器

中的$scope属性

app.controller('abc', function($scope) {

     $scope.content = '';
});

plunker

这样,每个单独的控制器实例都使用自己的content属性进行初始化。

希望这有帮助。