Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法
更新時(shí)間：2017年02月20日 15:22:42 作者：python基礎(chǔ)教程
這篇文章主要介紹了Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
下面一段代碼給大家介紹了Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法，具體代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ng-app指令,angular找到第一個(gè)ng-app就不會(huì)再找了，在一個(gè)頁(yè)面中只使用一個(gè)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);
};
}]);
//手動(dòng)的讓第二個(gè)div被myapp2管理
angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);
</script>
</body>
</html>
這種方法不推薦，請(qǐng)參考下篇文章。下面給大家介紹angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法(二)。敬請(qǐng)關(guān)注！
相關(guān)文章
AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密
AngularJS 是一個(gè) JavaScript 框架，它可以通過(guò) <script> 標(biāo)簽添加到 HTML 頁(yè)面。這篇文章主要介紹了AngularJs自定義服務(wù)之實(shí)現(xiàn)簽名和加密的相關(guān)資料,需要的朋友可以參考下2016-08-08
今天小編就為大家分享一篇angular中子控制器向父控制器傳值的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
AngularJS 實(shí)現(xiàn)JavaScript 動(dòng)畫效果詳解
本文主要介紹AngularJS 實(shí)現(xiàn) JavaScript 動(dòng)畫的資料，這里整理了詳細(xì)的資料和簡(jiǎn)單示例代碼，有興趣的小伙伴可以參考下2016-09-09
Angular 1.x個(gè)人使用的經(jīng)驗(yàn)小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 1.x個(gè)人使用的一些經(jīng)驗(yàn)，屬于一些基礎(chǔ)入門教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-07-07
簡(jiǎn)單談?wù)勱P(guān)于Angular Cli打包的事
使用過(guò)angular2人都應(yīng)該知道，angular2提供的Angular CLI來(lái)快速搭建，快速生成serives、component、derective、modulet各種模板...下面這篇文章主要給大家介紹了關(guān)于Angular Cli打包的一些事，需要的朋友可以參考下。2017-09-09
AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能示例
這篇文章主要介紹了AngularJS實(shí)現(xiàn)的獲取焦點(diǎn)及失去焦點(diǎn)時(shí)的表單驗(yàn)證功能,涉及AngularJS使用ng-blur、ng-focus針對(duì)表單事件監(jiān)聽(tīng)相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
本文主要介紹AngularJS包括的基礎(chǔ)知識(shí)，這里整理了相關(guān)資料并附示例代碼和實(shí)現(xiàn)效果圖，有需要的小伙伴可以參考下2016-08-08
SpringMVC簡(jiǎn)單整合Angular2的示例
這篇文章主要介紹了SpringMVC簡(jiǎn)單整合Angular2的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
AngularJS 與百度地圖的結(jié)合實(shí)例
這篇文章主要介紹了AngularJS 與百度地圖的結(jié)合實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能
這篇文章主要介紹了AngularJS使用指令增強(qiáng)標(biāo)準(zhǔn)表單元素功能，包括數(shù)據(jù)綁定、建立模型屬性、驗(yàn)證表單等，感興趣的小伙伴們可以參考一下2016-07-07