1. 程式人生 > >angular之ng-include和內部控制器的使用

angular之ng-include和內部控制器的使用

外部頁面

<!DOCTYPE html> 
<html lang="zh" ng-app="myApp"> 
<head> 
    <meta charset="UTF-8"> 
	<link rel="shortcut icon" href="favicon.ico" /> 
    <title>pagebounce</title> 
    <script src="js/angular.min.js"></script>
    <script src="dd.js"></script>
</head> 
<body>
  <div ng-controller="pagebounceController as pagec">
        <div ng-include="'bounce.html'" ng-controller="bounceController" ng-if="pagec.showbounce"></div>
        <button ng-click='pagec.showp()'>彈出另一個頁面</button>
  </div>
</body>
<script>
	var dapp = angular.module('myApp',[]);
	dapp.controller('pagebounceController',function($rootScope, $scope){
		var self = this;
		self.showbounce = false;
		self.showp = function(){
			self.showbounce = true;
		}
		self.closep = function(){
			self.showbounce = false;
		}
	})
    dapp.controller('bounceController',function($scope){
		$scope.bouneve = function(){
			alert('333')
		}
	})
</script>
</html>

include頁面

<div>
	<button ng-click='bouneve()'>彈出頁面的事件</button>
    <button ng-click='pagec.closep()'>關閉彈出的頁面</button>
</div>