欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS 在同一個界面啟動多個ng-app應用模塊詳解

 更新時間：2016年12月20日 09:45:23   投稿：lqh  
這篇文章主要介紹了AngularJS 在同一個界面啟動多個ng-app應用模塊詳解的相關資料,需要的朋友可以參考下

AngularJS默認在一個html界面中只啟動一個

 ng-app 模塊，而且是界面中第一次出現(xiàn)的那個使用 ng-app 聲明的模塊，該問題可以通過查看AngularJS源代碼或者是文檔驗證。

解決方案：

直接上代碼，如果有興趣了解其中緣由，可以選擇閱讀后面的部分；

<!DOCTYPE html>
<html>
<head lang="zh_CN">
 <meta charset="UTF-8">
 <title>AngularJS Source Code Analysis</title>
 <script src="source/angular.min.js" type="text/javascript"></script>
 <script src="source/angular-route.min.js" type="text/javascript"></script>
</head>
<body>
 <div ng-app="myApp-0" ng-controller="nameCtrl">
 <input type="text" ng-model="age"/>{{ demo }}--{{ age }}
 <ul>
  <li ng-repeat="val in names" ng-bind="val"></li>
 </ul>
 </div>

 <!-- 并行啟動多個ng-app -->
 <div id="test-0" ng-controller="testCtrl_0">
 <p>{{content.message}}</p>
 </div>
 <div id="test-1" ng-controller="testCtrl_1">
 <p>{{content.message}}</p>
 </div>
</body>
<script>
 var myApp_0 = angular.module("myApp-0", []);
 myApp_0.controller('nameCtrl', function ($scope, $rootScope){
 $scope.names = ["shen", "amy", "sereno"];
 $scope.age = 24;
 $rootScope.demo = "demo";
 });

 var myApp_1 = angular.module("myApp-1", []);
 myApp_1.controller('nameCtrl-1', function ($scope, $rootScope){
 $scope.names = ["shen-1", "amy-1", "sereno-1"];
 $rootScope.age = 24;
 });


 // 并行啟動多個 ng-app
 var myApp1mod = angular.module('test-0',[]);
 myApp1mod.controller('testCtrl_0',function($scope){
 var content= {};
 content.message = "Hello Test-0";
 $scope.content= content;
 });

 var myApp2mod = angular.module('test-1',[]);
 myApp2mod.controller('testCtrl_1',function($scope){
 var content= {};
 content.message = "Hello Test-1";
 $scope.content= content;
 });

 angular.element(document).ready(
  function (){
  angular.bootstrap(document.getElementById("test-0"), ["test-0"]);
  angular.bootstrap(document.getElementById("test-1"), ["test-1"]);
  }
 );

</script>
</html>

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

相關文章

  • 詳解Angular2響應式表單

    詳解Angular2響應式表單

    這篇文章主要介紹了詳解Angular2響應式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • Angular2學習教程之組件中的DOM操作詳解

    Angular2學習教程之組件中的DOM操作詳解

    這篇文章主要給大家介紹了Angular2學習教程之組件中DOM操作的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。
    2017-05-05
  • Angular2入門教程之模塊和組件詳解

    Angular2入門教程之模塊和組件詳解

    這篇文章主要給大家介紹了Angular2入門教程之模塊和組件的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
    2017-05-05
  • AngularJs實現(xiàn)ng1.3+表單驗證

    AngularJs實現(xiàn)ng1.3+表單驗證

    這篇文章主要介紹了AngularJs實現(xiàn)ng1.3+表單驗證，感興趣的小伙伴們可以參考一下
    2015-12-12
  • 詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector

    詳解什么是@ngrx/store開發(fā)包中的MemoizedSelector

    這篇文章主要為大家介紹了@ngrx/store開發(fā)包中的MemoizedSelector使用分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-07-07
  • Angular2實現(xiàn)的秒表及改良版示例

    Angular2實現(xiàn)的秒表及改良版示例

    這篇文章主要介紹了Angular2實現(xiàn)的秒表及改良版,結合實例形式分析 Angular2實現(xiàn)秒表功能的原理、操作技巧與相關注意事項,需要的朋友可以參考下
    2019-05-05
  • Angular2自定義分頁組件

    Angular2自定義分頁組件

    本篇文章主要介紹了Angular2自定義分頁組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • Angular6實現(xiàn)拖拽功能指令drag實例詳解

    Angular6實現(xiàn)拖拽功能指令drag實例詳解

    這篇文章主要為大家介紹了Angular6實現(xiàn)拖拽功能指令drag實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-11-11
  • AngularJs學習第八篇 過濾器filter創(chuàng)建

    AngularJs學習第八篇 過濾器filter創(chuàng)建

    這篇文章主要介紹了AngularJs學習第八篇 過濾器filter創(chuàng)建的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
    2016-06-06
  • 簡單談談Angular中的獨立組件的使用

    簡單談談Angular中的獨立組件的使用

    這篇文章主要介紹了簡單談談Angular中的獨立組件的使用的相關資料,通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，需要的朋友可以參考下
    2022-08-08

最新評論