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)文章
Spartacus CMS Feature selector的實(shí)現(xiàn)解析
這篇文章主要為大家介紹了Spartacus CMS Feature selector的實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
基于AngularJS實(shí)現(xiàn)的工資計(jì)算器實(shí)例
這篇文章主要介紹了基于AngularJS實(shí)現(xiàn)的工資計(jì)算器,結(jié)合具體實(shí)例形式分析了AngularJS數(shù)值計(jì)算相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
AngularJS的依賴注入實(shí)例分析(使用module和injector)
這篇文章主要介紹了AngularJS的依賴注入,結(jié)合實(shí)例形式分析了依賴注入的原理及使用module和injector實(shí)現(xiàn)依賴注入的步驟與操作技巧,需要的朋友可以參考下2017-01-01
AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法
在AngularJS中，有時(shí)候需要監(jiān)視Scope中的某個(gè)變量，因?yàn)樽兞康母淖儠?huì)影響一些界面元素的顯示，接下來(lái)通過(guò)本文給大家介紹AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法，需要的朋友參考下吧2016-01-01
淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容
本篇文章主要介紹了淺談Angular2 ng-content 指令在組件中嵌入內(nèi)容，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了angular2 NgModel模塊的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Angular環(huán)境搭建及簡(jiǎn)單體驗(yàn)小結(jié)
Angular基于TypeScript和react、vue相比 Angular更適合中大型企業(yè)級(jí)項(xiàng)目，本文通過(guò)實(shí)例代碼給大家分享Angular環(huán)境搭建及簡(jiǎn)單體驗(yàn)，感興趣的朋友跟隨小編一起學(xué)習(xí)吧2021-05-05
本文給大家分享Angularjs cookie 操作實(shí)例詳解，demo案例分析，感興趣的朋友參考下吧2017-09-09
AngularJS初始化過(guò)程分析(引導(dǎo)程序)
這篇文章主要介紹了AngularJS初始化過(guò)程分析(引導(dǎo)程序),這一節(jié)解釋了AngularJS初始化的過(guò)程,以及需要的時(shí)候你該如何修改AngularJS的初始化,需要的朋友可以參考下2014-12-12