快捷導(dǎo)航

Angular在一個頁面中使用兩個ng-app的方法

更新時間：2017年02月20日 15:22:42 作者：python基礎(chǔ)教程

這篇文章主要介紹了Angular在一個頁面中使用兩個ng-app的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

下面一段代碼給大家介紹了Angular在一個頁面中使用兩個ng-app的方法，具體代碼如下所示：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>ng-app指令,angular找到第一個ng-app就不會再找了，在一個頁面中只使用一個ng-app.</title>
 </head>
 <body>
  <input type="button" ng-app="myApp1" ng-controller="App1Controller" ng-click="do1()" value="按鈕1" />
  <input type="button" ng-app="myApp2" ng-controller="App2Controller" ng-click="do2()" value="按鈕2">
  <script src="bower_components/angular/angular.js"></script>
  <script>
  /**
  * myApp1 Module
  *
  * Description
  */
  var myApp1 = angular.module('myApp1', []);
  myApp1.controller('App1Controller', ['$scope', function($scope){
   $scope.do1 = function(){
    console.log(11111);
   };
  }]);
  var myApp2 = angular.module('myApp2', []);
  myApp2.controller('App2Controller', ['$scope', function($scope){
   $scope.do2 = function(){
    console.log(22222);
   };
  }]);
  //手動的讓第二個div被myapp2管理
  angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);
  </script>
 </body>
</html>

這種方法不推薦，請參考下篇文章。下面給大家介紹angular在一個頁面中使用兩個ng-app的方法(二)。敬請關(guān)注！

您可能感興趣的文章:

相關(guān)文章

AngularJs自定義服務(wù)之實現(xiàn)簽名和加密
AngularJS 是一個 JavaScript 框架，它可以通過 <script> 標(biāo)簽添加到 HTML 頁面。這篇文章主要介紹了AngularJs自定義服務(wù)之實現(xiàn)簽名和加密的相關(guān)資料,需要的朋友可以參考下
2016-08-08
angular中子控制器向父控制器傳值的實例
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-10-10
AngularJS 實現(xiàn)JavaScript 動畫效果詳解
本文主要介紹AngularJS 實現(xiàn) JavaScript 動畫的資料，這里整理了詳細(xì)的資料和簡單示例代碼，有興趣的小伙伴可以參考下
2016-09-09
Angular 1.x個人使用的經(jīng)驗小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 1.x個人使用的一些經(jīng)驗，屬于一些基礎(chǔ)入門教程，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-07-07
簡單談?wù)勱P(guān)于Angular Cli打包的事
使用過angular2人都應(yīng)該知道，angular2提供的Angular CLI來快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。
2017-09-09
AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的獲取焦點及失去焦點時的表單驗證功能,涉及AngularJS使用ng-blur、ng-focus針對表單事件監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下
2017-10-10
AngularJS包括詳解及示例代碼
本文主要介紹AngularJS包括的基礎(chǔ)知識，這里整理了相關(guān)資料并附示例代碼和實現(xiàn)效果圖，有需要的小伙伴可以參考下
2016-08-08
SpringMVC簡單整合Angular2的示例
這篇文章主要介紹了SpringMVC簡單整合Angular2的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
AngularJS 與百度地圖的結(jié)合實例
這篇文章主要介紹了AngularJS 與百度地圖的結(jié)合實例的相關(guān)資料,需要的朋友可以參考下
2016-10-10
AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能，包括數(shù)據(jù)綁定、建立模型屬性、驗證表單等，感興趣的小伙伴們可以參考一下
2016-07-07