javascript - 在嵌套的 Angularjs Controller 中使用 ng-model

Question

我在 angularjs 中有两个嵌套 Controller ，想在内部 Controller 中使用来自外部的 ng-model。假设这个

<div ng-controller='outController'>
    // data.Name : from outer controller
    <div ng-controller='innerController'>
         <input type="text" ng-model='name' ng-init='name=data.Name'>
         {{data.Name}} // display this scope value
    </div>
 </div> 

data.Name 值显示在 html 页面中但未绑定(bind)到名称 ng-model。 如何将此值绑定(bind)到内部 ng-model？

Answer 1

在这种情况下，您应该遵循点规则，这样您就可以使用 prototypal inheritance 访问子范围内的父范围。 .要使用这种方法，你需要在你的父 Controller 中声明一个对象，就像这里一样，它应该在 outController 中声明，然后内部 Controller 不会创建一个新的，它将使用现有的 原型(prototype)继承

标记

<div ng-controller='outController'>
    // data.Name : from outer controller
  <div ng-controller='innerController'>
        <input type="text" ng-model='data.Name'>
  </div>
</div>

代码

app.controller('outController', function($scope){
   $scope.data = {};

   //..other code here ..//

})