Angular JS在一个页面中使用两个ng-app的方法

阅读 71

2023-04-17


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.angularjs.org/1.2.25/angular.min.js"></script>
<title>ng-app有多个时只会加载第一个,但可以有多个controller。</title>
</head>
<body>
	<div id="div1" ng-app='myApp1' ng-controller="controller1">
		<h1>{{name}}</h1>
	</div>
	<div id="div2" ng-app='myApp2' ng-controller="controller2">
		<h1>{{name}}</h1>
	</div>
	<script>
	var myApp1 = angular.module('myApp1', []);
	myApp1.controller('controller1', function($scope){
		$scope.name = 'div1';
	});
	var myApp2 = angular.module('myApp2', []);
	myApp2.controller('controller2', function($scope){
		$scope.name = 'div2';
	});
	//手动加载
	angular.bootstrap(document.querySelector('[ng-app="myApp2"]'), ['myApp2']);
	</script>
</body>
</html>

 

精彩评论(0)

0 0 举报