在嵌套的 Angularjs 控制器中使用 ng-model [英] Use ng-model in nested Angularjs controller

问题描述

我在 angularjs 中有两个嵌套控制器，并且想在内部控制器中使用来自外部的 ng-model.假设这个

//data.Name : 来自外部控制器<div ng-controller='innerController'><input type="text" ng-model='name' ng-init='name=data.Name'>{{data.Name}}//显示这个范围值

data.Name 值显示在 html 页面中，但不绑定到名称 ng-model.如何将此值绑定到内部 ng-model?

解决方案

在这种情况下，您应该遵循点规则，这样您就可以使用 原型继承.为了使用这种方法，你需要在父控制器中声明一个对象，就像这里应该在 outController 中声明然后内部控制器不会创建一个新的，它将使用现有的使用 原型继承

标记

//data.Name : 来自外部控制器<div ng-controller='innerController'><input type="text" ng-model='data.Name'>

代码

app.controller('outController', function($scope){$scope.data = {};//..这里的其他代码..//})

I have two nested controller in angularjs, and want to use ng-model from outer in inner controller. Suppose this

<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 value display in html page but not bind to name ng-model. How to bind this value to inner ng-model?

解决方案

You should follow dot rule in this case, so that will allow you to access the parent scope inside the child scope using prototypal inheritance. For using this approach you need to have an object declared in your parent controller like here it should be declared in outController then the inner controller will not create a new one, it will use the existing one using prototypal inheritance

Markup

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

Code

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

   //..other code here ..//

})

这篇关于在嵌套的 Angularjs 控制器中使用 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！