• 【AnjularJS系列4】单个页面加载多个ng-App


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

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

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

    需要加载两个ng-app,需要进行手动加载:

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

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

    以下为完整代码:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5     <script src="js/angular.min.js"></script> 
     6     <style type="text/css">
     7 
     8     </style>
     9 </head>
    10 <body> 
    11     <div id="mysimpleBind" ng-app="mysimpleBind" ng-controller="MySimplectrl">
    12         <div>
    13             <label>Name:</label>
    14             <input type="text" ng-model="name"  placeholder="请输入姓名" name="">
    15         </div>
    16         <div>
    17             <label>问候语:</label>
    18             <label>Hello,{{name}}</label>
    19         </div>
    20     </div>  
    21     2、双向绑定
    22     <div id="myBind" ng-app="myBind" ng-controller="MyBindctrl">
    23         <div>
    24             <label>昵称:</label>
    25             <input type="text" ng-model="user.name"  placeholder="请输入姓名">
    26             <input type="button" value="获取年龄" ng-click="GetAge();">
    27         </div>
    28         <div>
    29             <label>年龄:</label>
    30             <label> {{user.agetext}}</label>
    31         </div>
    32     </div> 
    33 </body>
    34 <script type="text/javascript">  
    35     var myModule = angular.module('myBind', []);
    36     myModule.controller("MyBindctrl",function($http,$scope){
    37         var nameInfo= [{name:"张立伟",age:20},{name:"闵志涛",age:21},{name:"杨一凡",age:22},{name:"黄征",age:29}];  
    38         $scope.GetAge=function(){ 
    39             var _bl=false;
    40             for(var i=0;i<nameInfo.length;i++)
    41             {
    42                 if (nameInfo[i].name==$scope.user.name) {
    43 
    44                     $scope.user.agetext= $scope.user.name+"今年"+nameInfo[i].age+"岁了";
    45                     _bl=true;
    46                     break;
    47                 }
    48             } 
    49             if (!_bl) {
    50                 $scope.user.agetext=  "找不到记录";
    51             }
    52         };
    53     }); 
    54     var myModule1 = angular.module('mysimpleBind', []);
    55     myModule1.controller("MySimplectrl",function($http,$scope){
    56     }); 
    57 
    58     angular.bootstrap(document.getElementById("myBind"), ["myBind"]);
    59     angular.bootstrap(document.getElementById("mysimpleBind"), ["mysimpleBind"]);
    60 
    61 </script>
    62 </html>
    View Code
  • 相关阅读:
    5.1重磅活动:区块链免费送书
    Java 9 被无情抛弃,Java 8 直接升级到 Java 10!!
    Linux负载均衡利器(LVS)
    豌豆荚Redis集群方案:Codis
    Spring Boot Redis Cluster实战
    高性能代理缓存服务器—Squid
    Facebook分布式框架—Thrift介绍。
    Java 高级面试知识点汇总!
    (4)设计模式-建造者模式
    (3)设计模式-单例模式
  • 原文地址:https://www.cnblogs.com/alwaysblog/p/6226447.html
Copyright © 2020-2023  润新知