码迷,mamicode.com
首页 > 移动开发 > 详细

AngularJS中多个ng-app(手动加载模块)

时间:2016-04-09 20:35:49      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:

1.当有多个ng-app时:(首先是要加载angularJS)
<div ng-app="">
  <p>姓名:<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
  <p> {{name}} </p>
</div>
<div ng-app="">
  <p>年龄:<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
  <p> {{age}} </p>
</div>

结果如下:

技术分享

技术分享
解析:AngularJs默认只加载一个ng-app。
 
2.假设多个ng-app具有不同的名字:
<div ng-app="name">
  <p>姓名:<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
  <p> {{name}} </p>
</div>
<div ng-app="age">
  <p>年龄:<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
  <p> {{age}} </p>
</div>

结果如下:

技术分享

技术分享
3.那么如何一个页面有多个ng-app:
<div ng-app="name">
  <p>姓名:<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
  <p> {{name}} </p>
</div>
<div id="A2" ng-app="age">
  <p>年龄:<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
  <p> {{age}} </p>
</div>
<script type="text/javascript">
  var app1 = angular.module("name",[]);
  var app2 = angular.module("age",[]);
 
  //手动加载模块
  var ageDom = document.getElementById(A2);
  angular.bootstrap(ageDom, [age]);
</script>

技术分享 

技术分享
总结:
(1)ng-app 指令定义一个 AngularJS 应用程序。
(2)ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
(3)ng-bind 指令把应用程序变量 name 绑定到某个段落的 innerHTML。
        <p> {{age}} </p> 可以写成 <p ng-bind="age"> </p>
4)ng-init 指令初始化 AngularJS 应用程序变量。
<div ng-app="name" ng-init="name=‘hello‘">
  <p>姓名:<input type="text" ng-model="name" placeholder="请输入姓名" /></p>
  <p> {{name}} </p>
</div>
<div id="A2" ng-app="age" >
  <p>年龄:<input type="text" ng-model="age" placeholder="请输入年龄" /></p>
  <p ng-bind="age"> </p>
</div>
<script type="text/javascript">
  var app1 = angular.module("name",[]);
  var app2 = angular.module("age",[]); 
  //手动加载模块
  var ageDom = document.getElementById(A2);
  angular.bootstrap(ageDom, [age]);
</script>

 

 

技术分享

AngularJS中多个ng-app(手动加载模块)

标签:

原文地址:http://www.cnblogs.com/daydayupyxq/p/5372412.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!