讓AngularJS的controllers之間共享數據

時間 2019-11-10

標籤 angularjs controllers 之間共享數據欄目 AngularJS 简体版

原文原文鏈接

如何讓controller之間共享數據呢？大體是讓不一樣controller中的變量指向同一個實例。

經過service建立一個存放共享數據的對象。css

.service("greeting", function Greeting(){
    var greeting = this;

    greeting.message = "default";
})

讓不一樣的controller中的變量指向Greeting這個實例。html

.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.htmlnode

<!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.jsbootstrap

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.htmlapp

<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>