补充:同级controller之间的通信,依靠传入$rootScope全局变量(自身是一个对象)
并在注入信息的函数中添加该参数实现
模块化样式:
html文件:
<!DOCTYPE html>
<html ng-app='app'>
<head lang="en">
<meta charset='utf-8'/>
<title ng-bind='mainTitle'></title>
<link rel="stylesheet" href="css/apps/index.css" />
<link rel="stylesheet" href="css/libs/bootstrap.min.css" />
</head>
<body>
<ul class="nav">
<li><a class="active" href="#mail-homepage">邮箱首页</a></li>
<li><a href="#mail-writed">写邮件</a></li>
<li><a href="#mail-drafts">草稿箱</a></li>
</ul>
<div ng-view style="width:100%; height:300px; border:1px solid black"></div>
<script src="js/libs/angular.js"></script>
<script src="js/libs/angular.route.min.js"></script>
<script src="js/apps/app.js"></script>
<script src="js/apps/route.js"></script>
<script src="js/apps/controllers/homepageController.js"></script>
<script src="js/apps/controllers/writepageController.js"></script>
<script src="js/apps/controllers/draftspageController.js"></script>
</body>
</html>
页面数模块化app.js:
var app = angular.module('app', ['ngRoute']);
路由route.js:
app.config(['$routeProvider', function ($routeProvider){
$routeProvider
.when('/mail-homepage', {
templateUrl:'view/homepage.html',
controller:'homepageController'
})
.when('/mail-writed', {
templateUrl:'view/writepage.html',
controller:'writepageController'
})
.when('/mail-drafts', {
templateUrl:'view/draftspage.html',
controller:'draftspageController'
})
.otherwise({
redirectTo:'/mail-homepage'
});
}]);
控制器脚本一:
//使用NG全局变量实现同级controller之间的通信
app.controller('draftspageController',['$scope','$rootScope',function($scope,$rootScope){
$scope.draftspageTitle='这是草稿箱页面';
$scope.mail1=$rootScope.context;
}])
控制器脚本二:
app.controller('homepageController', ['$scope', function ($scope){
$scope.homepageTitle = '这是邮箱首页';
}]);
控制器脚本三:
//在注入信息中增加NG整体全局变量,而该全局变量是一个对象,解决同级controller之间不能通信的问题
app.controller('writepageController', ['$scope','$rootScope', '$rootScope', function ($scope, $rootScope){
$scope.writepageTitle = '这是写邮件页面';
$scope.mail = '';
$scope.saveToDrafts = function (mail){
$rootScope.context=mail;
};
}]);