第四篇，插播， 单个页面加载多个ng-App

在写范例的时候发现的问题

一个页面有多个ng-app，angular只会处理第一个ng-app

需要加载两个ng-app，需要进行手动加载：

angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);

注：必须给ng-app的元素进行Id赋值，才能进行手动加载。

以下为完整代码：

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <script src="js/angular.min.js"></script>

     <style type="text/css">

     </style>

 </head>

 <body>

     <div id="mysimpleBind" ng-app="mysimpleBind" ng-controller="MySimplectrl">

         <div>

             <label>Name:</label>

             <input type="text" ng-model="name"  placeholder="请输入姓名" name="">

         </div>

         <div>

             <label>问候语：</label>

             <label>Hello,{{name}}</label>

         </div>

     </div>

     2、双向绑定

     <div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">

         <div>

             <label>昵称:</label>

             <input type="text" ng-model="user.name"  placeholder="请输入姓名">

             <input type="button" value="获取年龄" ng-click="GetAge();">

         </div>

         <div>

             <label>年龄：</label>

             <label> {{user.agetext}}</label>

         </div>

     </div>

 </body>

 <script type="text/javascript">

     var myModule = angular.module('myBind', []);

     myModule.controller("MyBindctrl",function($http,$scope){

         var nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}];

         $scope.GetAge=function(){

             var _bl=false;

             for(var i=0;i<nameInfo.length;i++)

             {

                 if (nameInfo[i].name==$scope.user.name) {

                     $scope.user.agetext= $scope.user.name+"今年"+nameInfo[i].age+"岁了";

                     _bl=true;

                     break;

                 }

             }

             if (!_bl) {

                 $scope.user.agetext=  "找不到记录";

             }

         };

     });

     var myModule1 = angular.module('mysimpleBind', []);

     myModule1.controller("MySimplectrl",function($http,$scope){

     }); 

     angular.bootstrap(document.getElementById("myBind"), ["myBind"]);

     angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);

 </script>

 </html>

【AnjularJS系列4 】 — 单个页面加载多个ng-App的更多相关文章

  1. AnjularJS系列4 —— 单个页面加载多个ng-App

    第四篇,插播, 单个页面加载多个ng-App 在写范例的时候发现的问题 一个页面有多个ng-app,angular只会处理第一个ng-app 需要加载两个ng-app,需要进行手动加载: angula ...

  2. http系列--从输入 URL 到页面加载完成的过程

    一.前言 这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目.每一个前端人员,如果要往更高阶发展,必然会将自己的知识体系梳理一遍,没有牢固的知识体系,无法往更高处走! 二.主干流程 在将浏览器 ...

  3. 从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  4. JS脚本文件的位置对页面加载性能影响以及无阻塞脚本（javascript）模式

    JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...

  5. 转： web 页面加载速度优化实战-100% 的飞跃提升

    前言 一个网站的加载速度有多重要? 反正我相信之前来 博主网站 的人至少有 50% 在加载完成前关闭了本站. 为啥捏? 看图 首页完整加载时间 8.18s,看来能进来看博主网站的人都是真爱呀,哈哈. ...

  6. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. web页面加载速度缓慢，如何优化？

    参考博客: https://www.cnblogs.com/xp796/p/5236945.html https://www.cnblogs.com/MarcoHan/p/5295398.html - ...

  8. jQuery页面加载初始化的3种方法

    jQuery 页面加载初始化的方法有3种 ,页面在加载的时候都会执行脚本,应该没什么区别,主要看习惯吧,本人觉得第二种方法最好,比较简洁. 第一种: $(document).ready(functio ...

  9. 页面加载完成后，触发事件——trigger（）

    <button id="btn">点击我</button> <div id="test"></div> 如果页面 ...

随机推荐

  1. ZBrush细说3D海盗角色的创建艺术

    一提到海盗,就不由自主想到了<加勒比海盗>,那个帅得一塌糊涂的杰克船长更是让人夜不能寐寝难安,但在艺术的世界里,角色无美丑,今天我们要讲的这位海盗,就与“帅气”八竿子打不着了,它甚至有点古 ...

  2. java 如何将异常Exception的信息转换为String

    一般情况下,我们是通过log4j封装的api将异常打印到日志当中. logger.error("error", e); 如果我们想在程序中获得该异常的详细信息,并输出到数据库中,我 ...

  3. Map之HashMap的get与put流程，及hash冲突解决方式

    在java中HashMap作为一种Map的实现,在程序中我们经常会用到,在此记录下其中get与put的执行过程,以及其hash冲突的解决方式: HashMap在存储数据的时候是key-value的键值 ...

  4. CSS背景图怎么自适应全屏（手机或者电脑）

    #demo{ background-img:url(../bg.png); --(1)适用于上半部分背景图片,下半部分纯色 将背景图像等比缩放到完全覆盖屏幕,背景图有可能超出屏幕(容器) backgr ...

  5. sublime Text3的使用

    sublime text百度百科: Sublime Text 是一个代码编辑器,也是HTML和散文先进的文本编辑器.Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python ...

  6. C语言基础 (12) 文件的操作 FILE

    课程回顾 结构体基本操作: 结构体类型的定义 // struct为关键字 Stu为自定义标识符 // struct Stu才是结构体类型 // 结构体成员不能在定义类型时赋值 struct Stu { ...

  7. 一次 Laravel 性能分析全程笔记

    大家都知道 laravel 项目写起来是挺爽,但是在生产环境性能不高,我们来抽丝剥茧分析我自己项目的运行时间消耗: Bootstrap 耗时 步骤 耗时 Illuminate\Foundation\B ...

  8. PHP学习总结（3）——PHP入门篇之PHP的echo语句

    Echo语句 echo是PHP中的输出语句,可以把字符串输出(字符串用双引号括起来). 如下代码: <?php echo "Hello world!";?> 注意ech ...

  9. HDU 4357

    这道题写起来没难度,但这种题确实很难,这种字符串的题难在证明.以后也要注意. 奇偶性不同的字符串肯定不能转换,因为每一次交换都是字符串的和增加2. 当字符串长度为2时,可以模拟交换,最多26次. 否则 ...

  10. Ubuntu12.04 下 GTK3.xx 的安装、编译和測试

    用此方法成功在UBUNTU 12.04下安装GTK 3.xxx. 一.安装 1.安装gcc/g++/gdb/make 等基本编程工具 $sudo apt-get install build-essen ...