如何讓controller之間共享數據呢？大致是讓不同controller中的變量指向同一個實例。
通過service創建一個存放共享數據的對象。
.service("greeting", function Greeting(){
var greeting = this;
greeting.message = "default";
})
讓不同的controller中的變量指向Greeting這個實例。
.controller('FirstCtrl', function FirstCtrl(greeting){
var first = this;
first.greeting = greeting;
})
.controller('SecondCtrl', function SecondCtrl(greeting){
var second = this;
second.greeting = greeting;
})
以上，FirstCtrl和SecondCtrl中的greeting變量都指向Greeting這個實例。這樣FirstCtrl和SecondCtrl共享同一個Greeting實例。
具體實現，先看文件結構：
templates/
.....first.html
.....second.html
app.js
index.html
index.html
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <style> body{ padding:20px; } </style> </head> <body> <div class="container"> <ui-view></ui-view> </div> <script src="../../node_modules/angular/angular.min.js"></script> <script src="../../node_modules/angular-ui-router/build/angular-ui-router.min.js"></script> <script src="app.js"></script> </body> </html>
以上，ui-view是用來呈現不同的視圖。
app.js
angular.module('app',['ui.router'])
.config(function config($stateProvider){
$stateProvider.state('index',{
url:"",
controller: "FirstCtrl",
controllerAs: "first",
templateUrl:"templates/first.html"
});
$stateProvider.state('second',{
url:"/second",
controller:"SecondCtrl as second",
templateUrl: "templates/second.html"
});
})
.service("greeting", function Greeting(){
var greeting = this;
greeting.message = "default";
})
.controller('FirstCtrl', function FirstCtrl(greeting){
var first = this;
first.greeting = greeting;
})
.controller('SecondCtrl', function SecondCtrl(greeting){
var second = this;
second.greeting = greeting;
})
以上，在angular-ui-router.min.js中封裝了ui.router這個module，需要依賴它。
first.html
<input type="text" ng-model="first.greeting.message"/> <div ng-class="first.greeting.message"> {{first.greeting.message}} {{'world'}} </div> <div ui-sref="second">Go to second</div>
以上，文本框通過ng-model和first.greeting.message進行了雙向綁定，即同Greeting這個實例的message進行了雙向綁定。
second.html
<h1>{{second.greeting.message}}</h1>
當更改first.html中文本框的值，這里的值也會相應變化。