在嵌套的 Angularjs 控制器中使用 ng-model

Question

我在 angularjs 中有两个嵌套控制器，并且想在内部控制器中使用外部的 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 页面中，但未绑定到名称 ng-model。 如何将此值绑定到内部 ng-model？

Answer 1

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

标记

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

})