angular 控制器以前的通訊和數據傳輸

時間 2019-11-12

原文原文鏈接

前端時間開發一個應用時，路由切換模塊的時候須要傳輸數據。在網上查閱了寫資料，細化了一些說明。通常有三種方式進行controller之間信息傳遞。html

一，利用js的繼承關係去傳遞controller之間的data，前端

　　我最先寫在我本身的應用中的就是用的這種方法，我把第一視圖的控制中獲取到的data數據綁定到$rootScope上面web

當路由發生改變跳轉到第二視圖的時候，直接在用$rootScope.answer_sheet這個數據。其實嚴格意義上來講這並非數據傳輸，只是利於js的繼承關係，兩個不一樣的子級共用父級的一個數據而已，並且兩個子集都去改變父級的數據。這樣操做並很差，會形成全局污染。app

二，利用angular的事件去傳遞信息$on,$emit,$boardcast這幾個方式來實現。$emit表示向上傳遞（父級），$boardcast表示向下傳遞（子級），$on監聽angular的事件，接受傳遞的數據。編輯器

先講講這個三個方法的使用ide

$emit()方法帶有兩個參數。
1. name（字符串）
要發出的事件名稱。
2. args（集合）
一個參數的集合，做爲對象傳遞到事件監聽器中。
$emit()方法返回了一個事件對象（）。
從監聽器中發出的一切異常都會傳遞到$exceptionHandler服務中。函數

實例scope.$emit('user:logged_in', scope.user);spa

$boardcast和$emit用法同樣傳兩個參數 name和argscode

scope.$broadcast('cart:checking_out', scope.cart);htm

3，$on是angular中的監聽事件

要監聽一個事件，咱們可使用$on()方法。這個方法爲具備某個特定名稱的事件註冊了一
個監聽器。事件名稱就是在Angular中觸發的事件類型。
例如，咱們能夠在路由變動過程被觸發時，監聽事件：
　　　　scope.$on('$routeChangeStart',
　　　　function(evt, next, current) {
　　　　　　// 一個新的路由被觸發了
　　　　});
無論何時事件$routeChangeStart（路由將要變動的時候，會廣播這個事件）被觸發，
監聽器（這個函數）都會被調用。

根據這三個方法的特性，$emit和$boardcast綁定事件name並傳輸數據agrs，用$on監聽綁定的事件並接受數據

廢話很少說直接上代碼（可複製到編輯器運行）

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>angular的通信</title>
    <script src="http://zhouwei007.web3v.com/js/angular.js"></script>
</head>
<body>
    <div ng-controller="ParentCtrl">                <!--父級-->
        <div ng-controller="SelfCtrl">              <!--本身-->
            <a ng-click="click()">click me</a>
            <div ng-controller="ChildCtrl"></div>   <!--子級-->
        </div>
        <div ng-controller="BroCtrl"></div>         <!--平級-->
    </div>
</body>
<script>
    var app = angular.module('App', []);
    app.controller('SelfCtrl', function($scope) {
        $scope.click = function () {
            $scope.$broadcast('to-child', 'child','child22');
            $scope.$emit('to-parent', 'parent');
        }
    });
    app.controller('ParentCtrl', function($scope) {
        $scope.$on('to-parent', function(event,data) {
            console.log('ParentCtrl', data);       //父級能獲得值
        });
        $scope.$on('to-child', function(event,data) {
            console.log('ParentCtrl', data);       //子級得不到值
        });
    });
    app.controller('ChildCtrl', function($scope){
        $scope.$on('to-child', function(event,data) {
            console.log('ChildCtrl', data);         //子級能獲得值
        });
        $scope.$on('to-parent', function(event,data) {
            console.log('ChildCtrl', data);         //父級得不到值
        });
    });
    app.controller('BroCtrl', function($scope){
        $scope.$on('to-parent', function(event,data) {
            console.log('BroCtrl', data);          //平級得不到值
        });
        $scope.$on('to-child', function(event,data) {
            console.log('BroCtrl', data);          //平級得不到值
        });
    });
</script>
</html>

三，經過自定服務傳值

angular服務的方式

在ng中服務是一個單例，因此在服務中生成一個對象，該對象就能夠利用依賴注入的方式在全部的控制器中共享。

<!DOCTYPE html>
<html lang="en" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>angular的service傳輸數據</title>
    <script src="http://zhouwei007.web3v.com/js/angular.js"></script>
</head>
<body >
<div ng-controller="MainCtrl">
    <input type="text" ng-model="test" />
    <div ng-click="change()">click me</div>
</div>
<div ng-controller="sideCtrl" ng-click="add()">
    '數據傳輸'+{{name}}
</div>
</body>
<script>
    var app = angular.module('App', []);
    app.factory('instance', function(){
        return {};
    });
    app.controller('MainCtrl', function($scope, instance) {
        $scope.change = function() {
            instance.name = $scope.test;
        };
    });
    app.controller('sideCtrl', function($scope, instance) {
        $scope.add = function() {
            $scope.name = instance.name;
        };
    });
</script>
</html>