การทำงานกับ $ scope $ emit และ $ scope $ on

ฉันจะส่ง$scopeวัตถุของฉันจากคอนโทรลเลอร์หนึ่งไปยังอีกที่ใช้.$emitและ.$onวิธีการได้อย่างไร

function firstCtrl($scope) {
    $scope.$emit('someEvent', [1,2,3]);
}

function secondCtrl($scope) {
    $scope.$on('someEvent', function(mass) { console.log(mass); });
}

มันไม่ทำงานอย่างที่ฉันคิดว่ามันควรจะเป็น วิธีการทำ$emitและการ$onทำงานหรือไม่

ประการแรกความสัมพันธ์ขอบเขตของพ่อแม่และลูกนั้นสำคัญ คุณมีความเป็นไปได้สองทางในการเปล่งเหตุการณ์:

• $broadcast - ยื้อเหตุการณ์ลงไปที่ขอบเขตเด็กทั้งหมด
• $emit - ยื้อเหตุการณ์ขึ้นไปตามลำดับชั้นขอบเขต

ฉันไม่ทราบอะไรเกี่ยวกับความสัมพันธ์ของตัวควบคุม (ขอบเขต) ของคุณ แต่มีหลายตัวเลือก:

1. หากขอบเขตของfirstCtrlเป็นพาเรนต์ของsecondCtrlขอบเขตรหัสของคุณควรทำงานโดยแทนที่$emitด้วย$broadcastในfirstCtrl:

   function firstCtrl($scope)
   {
       $scope.$broadcast('someEvent', [1,2,3]);
   }
   
   function secondCtrl($scope)
   {
       $scope.$on('someEvent', function(event, mass) { console.log(mass); });
   }

2. ในกรณีที่ไม่มีความสัมพันธ์ระหว่างผู้ปกครองกับลูกคุณสามารถแทรก$rootScopeเข้าไปในคอนโทรลเลอร์และออกอากาศเหตุการณ์ไปยังขอบเขตเด็กทั้งหมด (เช่นกันsecondCtrl)

   function firstCtrl($rootScope)
   {
       $rootScope.$broadcast('someEvent', [1,2,3]);
   }

3. $scope.$emitในที่สุดเมื่อคุณต้องการที่จะส่งเหตุการณ์จากตัวควบคุมเด็กขอบเขตขึ้นคุณสามารถใช้ หาก scope of firstCtrlเป็น parent ของsecondCtrlขอบเขต:

   function firstCtrl($scope)
   {
       $scope.$on('someEvent', function(event, data) { console.log(data); });
   }
   
   function secondCtrl($scope)
   {
       $scope.$emit('someEvent', [1,2,3]);
   }

ฉันขอแนะนำตัวเลือกที่ 4 เพิ่มเติมเพื่อเป็นทางเลือกที่ดีกว่าสำหรับตัวเลือกที่เสนอโดย @zbynour

ใช้$rootScope.$emitแทนการ$rootScope.$broadcastคำนึงถึงความสัมพันธ์ระหว่าง trasmitting และตัวควบคุมการรับ ด้วยวิธีนี้เหตุการณ์ยังคงอยู่ภายในชุดของเหตุการณ์$rootScope.$$listenersขณะ$rootScope.$broadcastที่เหตุการณ์แพร่กระจายไปยังขอบเขตเด็กทั้งหมดซึ่งส่วนใหญ่อาจจะไม่ฟังเหตุการณ์นั้น และแน่นอนในตอนท้ายของคอนโทรลเลอร์ที่คุณ$rootScope.$onได้รับ

สำหรับตัวเลือกนี้คุณต้องจำไว้ว่าให้ทำลาย rootScope Listeners ของคอนโทรลเลอร์:

var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
  unbindEventHandler();
});

ฉันจะส่งวัตถุ $ scope จากคอนโทรลเลอร์หนึ่งไปยังคอนโทรลเลอร์อื่นได้อย่างไรโดยใช้ $ emit และ. $ ในเมธอด?

คุณสามารถส่งวัตถุใด ๆ ที่คุณต้องการภายในลำดับชั้นของ app ของคุณรวมถึง$ ขอบเขต

นี่คือความคิดที่รวดเร็วเกี่ยวกับวิธีการออกอากาศและปล่อยการทำงาน

สังเกตเห็นโหนดด้านล่าง; ทั้งหมดซ้อนกันภายในโหนด 3 คุณใช้การกระจายและปล่อยเมื่อคุณมีสถานการณ์นี้

หมายเหตุ:จำนวนของแต่ละโหนดในตัวอย่างนี้เป็นค่าที่กำหนดเอง มันอาจเป็นหมายเลขหนึ่งได้อย่างง่ายดาย หมายเลขสอง หรือแม้แต่จำนวน 1,348 แต่ละหมายเลขเป็นเพียงตัวระบุสำหรับตัวอย่างนี้ จุดของตัวอย่างนี้คือการแสดงการซ้อนของ Angular controllers / directives

                 3
           ------------
           |          |
         -----     ------
         1   |     2    |
      ---   ---   ---  ---
      | |   | |   | |  | |

ตรวจสอบต้นไม้ต้นนี้ คุณตอบคำถามต่อไปนี้อย่างไร

หมายเหตุ:มีวิธีอื่น ๆ ที่จะตอบคำถามเหล่านี้ที่นี่เราจะพูดถึง แต่การออกอากาศและปล่อย นอกจากนี้เมื่ออ่านข้อความด้านล่างถือว่าแต่ละหมายเลขมีไฟล์เป็นของตัวเอง (คำสั่งตัวควบคุม) ตัวอย่างเช่น one.js, two.js, three.js

โหนด1พูดกับโหนด3 ได้อย่างไร

ในไฟล์one.js

scope.$emit('messageOne', someValue(s));

ในไฟล์three.js - โหนดบนสุดไปยังโหนดชายด์ทั้งหมดที่ต้องการสื่อสาร

scope.$on('messageOne', someValue(s));

โหนด 2 พูดกับโหนด 3 อย่างไร

ในไฟล์two.js

scope.$emit('messageTwo', someValue(s));

ในไฟล์three.js - โหนดบนสุดไปยังโหนดชายด์ทั้งหมดที่ต้องการสื่อสาร

scope.$on('messageTwo', someValue(s));

โหนด 3 พูดกับโหนด 1 และ / หรือโหนด 2 ได้อย่างไร

ในไฟล์three.js - โหนดบนสุดไปยังโหนดชายด์ทั้งหมดที่ต้องการสื่อสาร

scope.$broadcast('messageThree', someValue(s));

ในไฟล์one.js && two.jsไฟล์ใดที่คุณต้องการจับข้อความหรือทั้งสองอย่าง

scope.$on('messageThree', someValue(s));

โหนด 2 พูดกับโหนด 1 อย่างไร

ในไฟล์two.js

scope.$emit('messageTwo', someValue(s));

ในไฟล์three.js - โหนดบนสุดไปยังโหนดชายด์ทั้งหมดที่ต้องการสื่อสาร

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

ในไฟล์one.js

scope.$on('messageTwo', someValue(s));

อย่างไรก็ตาม

เมื่อคุณมีทั้งหมดเหล่านี้โหนดลูกซ้อนกันพยายามที่จะสื่อสารเช่นนี้คุณได้อย่างรวดเร็วจะเห็นหลาย$ บน , $ ออกอากาศและ$ ปล่อยของ

นี่คือสิ่งที่ฉันต้องการจะทำ

ในโหนด PARENT NODE ( 3ในกรณีนี้ ... ) ซึ่งอาจเป็นตัวควบคุมหลักของคุณ ...

ดังนั้นในไฟล์three.js

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

ตอนนี้ในใด ๆ ของโหนดลูกที่คุณจะต้อง$ ปล่อยข้อความหรือจับมันใช้$ บน

หมายเหตุ:โดยปกติแล้วจะค่อนข้างง่ายต่อการข้ามการพูดคุยในหนึ่งพา ธ ที่ซ้อนกันโดยไม่ใช้$ emit , $ broadcastหรือ$ onซึ่งหมายความว่ากรณีการใช้งานส่วนใหญ่จะใช้เมื่อคุณพยายามรับโหนด1เพื่อสื่อสารกับโหนด2หรือในทางกลับกัน

โหนด 2 พูดกับโหนด 1 อย่างไร

ในไฟล์two.js

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){ // for some event.
  return { name: 'talkToOne', data: [1,2,3] };
}

ในไฟล์three.js - โหนดบนสุดไปยังโหนดชายด์ทั้งหมดที่ต้องการสื่อสาร

เราจัดการกับสิ่งนี้แล้วจำได้ไหม?

ในไฟล์one.js

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

คุณจะยังต้องใช้$ onกับค่าเฉพาะที่คุณต้องการจับ แต่ตอนนี้คุณสามารถสร้างสิ่งที่คุณต้องการในโหนดใด ๆ โดยไม่ต้องกังวลเกี่ยวกับวิธีการรับข้อความข้ามช่องว่างโหนดหลักในขณะที่เราจับและออกอากาศ ทั่วไปpushChangesToAllNodes

หวังว่านี่จะช่วย ...

ในการส่ง$scope objectจากคอนโทรลเลอร์หนึ่งไปอีกคอนโทรลเลอร์หนึ่งฉันจะพูดถึง$rootScope.$broadcastและ$rootScope.$emitที่นี่เนื่องจากมันถูกใช้งานมากที่สุด

กรณีที่ 1 :

. $ $ rootScope ออกอากาศ: -

$rootScope.$broadcast('myEvent',$scope.data);//Here `myEvent` is event name

$rootScope.$on('myEvent', function(event, data) {} //listener on `myEvent` event

$rootScopeผู้ฟังจะไม่ถูกทำลายโดยอัตโนมัติ $destroyคุณจำเป็นต้องทำลายได้โดยใช้ มันจะดีกว่าที่จะใช้$scope.$onเมื่อ listeners on $scopeถูกทำลายโดยอัตโนมัติเช่นทันทีที่ $ scope ถูกทำลาย

$scope.$on('myEvent', function(event, data) {}

หรือ,

  var customeEventListener = $rootScope.$on('myEvent', function(event, data) {

  }
  $scope.$on('$destroy', function() {
        customeEventListener();
  });

กรณีที่ 2:

. $ $ rootScope ปล่อย:

   $rootScope.$emit('myEvent',$scope.data);

   $rootScope.$on('myEvent', function(event, data) {}//$scope.$on not works

ข้อแตกต่างที่สำคัญใน $ emit และ $ broadcast คือ $ rootScope เหตุการณ์ $ emit ต้องฟังโดยใช้ $ rootScope .
ในกรณีนี้คุณต้องทำลายผู้ฟังเช่นเดียวกับในกรณีของการออกอากาศ $

แก้ไข:

ฉันชอบที่จะไม่ใช้แต่การใช้$rootScope.$broadcast + $scope.$on คำสั่งผสมอาจทำให้เกิดปัญหาประสิทธิภาพการทำงานอย่างจริงจัง นั่นเป็นเพราะเหตุการณ์จะทำให้ฟองดูในขอบเขตทั้งหมด$rootScope.$emit+ $rootScope.$on$rootScope.$broadcast + $scope.$on

แก้ไข 2 :

ปัญหาที่ระบุในคำตอบนี้ได้รับการแก้ไขแล้วใน angular.js เวอร์ชัน 1.2.7 ตอนนี้การออกอากาศ $ หลีกเลี่ยงการระเบิดในขอบเขตที่ไม่ได้ลงทะเบียนและทำงานได้เร็วเท่ากับ $ ปล่อย

คุณต้องใช้ $ rootScope เพื่อส่งและจับภาพเหตุการณ์ระหว่างคอนโทรลเลอร์ในแอพเดียวกัน ฉีด $ rootScope พึ่งพาตัวควบคุมของคุณ นี่คือตัวอย่างการทำงาน

app.controller('firstCtrl', function($scope, $rootScope) {        
        function firstCtrl($scope) {
        {
            $rootScope.$emit('someEvent', [1,2,3]);
        }
}

app.controller('secondCtrl', function($scope, $rootScope) {
        function secondCtrl($scope)
        {
            $rootScope.$on('someEvent', function(event, data) { console.log(data); });
        }
}

กิจกรรมที่ลิงก์ไปยังวัตถุ $ scope เพียงแค่ทำงานในคอนโทรลเลอร์ของเจ้าของ การสื่อสารระหว่างตัวควบคุมทำได้ผ่าน $ rootScope หรือบริการ

คุณสามารถเรียกใช้บริการจากคอนโทรลเลอร์ที่ส่งคืนสัญญาจากนั้นใช้บริการในคอนโทรลเลอร์ของคุณ และใช้งานต่อไป$emitหรือ$broadcastเพื่อแจ้งผู้ควบคุมอื่น ๆ เกี่ยวกับเรื่องนี้ ในกรณีของฉันฉันต้องโทร http ผ่านบริการของฉันดังนั้นฉันจึงทำสิ่งนี้:

function ParentController($scope, testService) {
    testService.getList()
        .then(function(data) {
            $scope.list = testService.list;
        })
        .finally(function() {
            $scope.$emit('listFetched');
        })


    function ChildController($scope, testService) {
        $scope.$on('listFetched', function(event, data) {
            // use the data accordingly
        })
    }

และบริการของฉันมีลักษณะเช่นนี้

    app.service('testService', ['$http', function($http) {

        this.list = [];

        this.getList = function() {
            return $http.get(someUrl)
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        list = response.data.results;

                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }

                }, function(response) {
                    // something went wrong
                    return $q.reject(response.data);
                });

        }

    }])

นี่คือหน้าที่ของฉัน:

$rootScope.$emit('setTitle', newVal.full_name);

$rootScope.$on('setTitle', function(event, title) {
    if (scope.item) 
        scope.item.name = title;
    else 
        scope.item = {name: title};
});

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('parentCtrl',function($scope){
  $scope.$on('MyEvent',function(event,data){    
    $scope.myData = data;
  });
 });

app.controller('childCtrl',function($scope){
  $scope.fireEvent = function(){ 
  $scope.$emit('MyEvent','Any Data');
  }  
 });
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="parentCtrl" ng-model="myName">

{{myData}}

 <div ng-controller="childCtrl">
   <button ng-click="fireEvent()">Fire Event</button>
 </div>

</div>
</body>
</html>

ขอบเขตสามารถใช้เพื่อเผยแพร่ส่งเหตุการณ์ไปยังขอบเขตชายด์หรือพาเรนต์

$ emit - แพร่กระจายเหตุการณ์ไปยังผู้ปกครอง $ Broadcast - เผยแพร่กิจกรรมให้กับเด็ก ๆ $ on - วิธีการฟังเหตุการณ์เผยแพร่โดย $ emit และ $ broadcast

ตัวอย่างindex.html :

<div ng-app="appExample" ng-controller="EventCtrl">
      Root(Parent) scope count: {{count}}
  <div>
      <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
      <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>

      Childrent scope count: {{count}} 
  </div>
</div>

ตัวอย่างapp.js :

angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}]);

ที่นี่คุณสามารถทดสอบรหัส: http://jsfiddle.net/zp6v0rut/41/

โค้ดด้านล่างแสดงตัวควบคุมย่อยสองตัวที่ใช้ส่งเหตุการณ์ไปยังตัวควบคุมหลัก (rootScope)

<body ng-app="App">

    <div ng-controller="parentCtrl">

        <p>City : {{city}} </p>
        <p> Address : {{address}} </p>

        <div ng-controller="subCtrlOne">
            <input type="text" ng-model="city" />
            <button ng-click="getCity(city)">City !!!</button>
        </div>

        <div ng-controller="subCtrlTwo">

            <input type="text" ng-model="address" />
            <button ng-click="getAddrress(address)">Address !!!</button>

        </div>

    </div>

</body>

var App = angular.module('App', []);

// parent controller
App.controller('parentCtrl', parentCtrl);

parentCtrl.$inject = ["$scope"];

function parentCtrl($scope) {

    $scope.$on('cityBoom', function(events, data) {
        $scope.city = data;
    });

    $scope.$on('addrBoom', function(events, data) {
        $scope.address = data;
    });
}

// sub controller one

App.controller('subCtrlOne', subCtrlOne);

subCtrlOne.$inject = ['$scope'];

function subCtrlOne($scope) {

    $scope.getCity = function(city) {

        $scope.$emit('cityBoom', city);    
    }
}

// sub controller two

App.controller('subCtrlTwo', subCtrlTwo);

subCtrlTwo.$inject = ["$scope"];

function subCtrlTwo($scope) {

    $scope.getAddrress = function(addr) {

        $scope.$emit('addrBoom', addr);   
    }
}

http://jsfiddle.net/shushanthp/zp6v0rut/

ตามเอกสารเหตุการณ์ angularjs จุดสิ้นสุดการรับควรมีอาร์กิวเมนต์ที่มีโครงสร้างดังนี้

@params

- เหตุการณ์ {Object} เป็นวัตถุเหตุการณ์ที่มีข้อมูลเกี่ยวกับเหตุการณ์

- {Object} args ที่ถูกส่งผ่านโดย callee (โปรดทราบว่าสิ่งนี้สามารถส่งได้ดีกว่าในพจนานุกรมวัตถุเสมอ)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); จากรหัสของคุณ

นอกจากนี้หากคุณกำลังพยายามที่จะได้รับข้อมูลส่วนแบ่งที่ใช้ร่วมกันในตัวควบคุมที่แตกต่างกันมีวิธีอื่นเพื่อให้บรรลุและนั่นคือบริการเชิงมุมเนื่องจากบริการเป็นข้อมูลเดี่ยวสามารถจัดเก็บและดึงข้อมูลผ่านตัวควบคุมเพียงสร้าง getter และ ฟังก์ชันตัวตั้งค่าในบริการนั้นเปิดเผยฟังก์ชันเหล่านี้สร้างตัวแปรทั่วโลกในบริการและใช้เพื่อจัดเก็บข้อมูล

วิธีที่ง่ายที่สุด:

HTML

  <div ng-app="myApp" ng-controller="myCtrl"> 

        <button ng-click="sendData();"> Send Data </button>

    </div>

JavaScript

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $rootScope) {
            function sendData($scope) {
                var arrayData = ['sam','rumona','cubby'];
                $rootScope.$emit('someEvent', arrayData);
            }

        });
        app.controller('yourCtrl', function($scope, $rootScope) {
            $rootScope.$on('someEvent', function(event, data) {
                console.log(data); 
            }); 
        });
    </script>