zoukankan      html  css  js  c++  java
  • 【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
  • 相关阅读:
    react-document-title
    react-router
    redux-saga 异步流
    redux
    redux-thunk
    react-router-redux
    [翻译] ClockView 时钟
    [翻译] MZTimerLabel 用作秒表或者倒计时
    [翻译] MCProgressView 使用自定义图片做进度显示
    [翻译] ADPopupView 触摸弹出视窗
  • 原文地址:https://www.cnblogs.com/alwaysblog/p/6226447.html
Copyright © 2011-2022 走看看