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

编程入门 行业动态 更新时间:2024-10-25 14:26:49
本文介绍了在嵌套的 Angularjs 控制器中使用 ng-model的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时送ChatGPT账号..

我在 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屋!

更多推荐

[db:关键词]

本文发布于:2023-04-21 10:20:21,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1000498.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:嵌套   器中   Angularjs   ng

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!