theo dõi

Gần nhất :

Thống kê câu hỏi

Chuyên mục : Lập trình
Topic : AngularJs
Hỏi lúc:
Lượt xem: 13,978

Làm việc với $scope.$emit và $scope.$on như thế nào?

Đặng Khiết Linh Đặng Khiết Linh
 02  01  00
02 bình chọn hữu ích bởi Đỗ Trúc Vy Lý Tấn Khang

Làm thế nào tôi có thể gửi đối tượng $scope của tôi đến 1 controller khác sử dụng phương thức .$emit and .$on?

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

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

Nó không làm việc theo cách mình nghĩ. Vậy làm thế nào để $emit và $on làm việc?

13,978 xem 07 theo dõi 02 hữu ích hỏi –

Bạn biết ai đó có thể trả lời câu hỏi này?. Bạn có thể giúp đỡ bằng cách tìm những người giỏi nhất:

user user user user user

Phan Huyền Trang Phan Huyền Trang
 05  00  01
05 bình chọn hữu ích bởi Bùi Thu Phương, Trần Minh Hùng Vũ Công Sơn ... (tất cả)

Trước hết, phạm vi quan hệ cha-con không thành vấn đề. Bạn có hai khả năng để phát ra một số sự kiện:

  • $broadcast - gửi sự kiện xuống cho tất cả hành vi con
  • $emit - gửi sự kiện lên cho các hành phi phân cấp

Nếu hành vi firstCtrl là cha của hành vi secondCtrl, mã của bạn nên làm việc bằng cách thay thế $emit bởi $broadcast trong firstCtrl:

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

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

Trong trường hợp không có quan hệ cha-con giữa các hành vi của bạn. Bạn có thể thêm $rootScope vào controller và gửi các sự kiện đến tất cả các hành vi con (tức cũng là seconCtrl)

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

Cuối cùng khi bạn phải gửi các sự kiện từ controller đến các hành vi con trở lên bạn có thể dùng $scope.$emit. Nếu hành vi firstCrl là cha của hành vi secondCtrl

function firstCtrl($scope)
{
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope)
{
    $scope.$emit('someEvent', [1,2,3]);
}
13,661 xem 05 hữu ích trả lời –
Dương Thanh Huyền Dương Thanh Huyền
 05  00  02
02 bình chọn hữu ích bởi Võ Thành Đạt Lê Chí Sơn

Mã dưới đây cho thấy hai tiểu bộ điều khiển từ nơi các sự kiện được cử lên để điều khiển cha (rootScope)

Html

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

Js

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

    }

}
13,658 xem 02 hữu ích trả lời –
Võ Phương Trang Võ Phương Trang
 01  00  02

Đây là hàm của tôi:

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

$rootScope.$on('setTitle', function(event, title) {
    if (scope.item) 
        scope.item.name = title;
    else 
        scope.item = {name: title};
});
13,660 xem 00 hữu ích trả lời –