使用$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如何工作?

当前回答

作用域可用于将事件传播、分派到作用域的子对象或父对象。

$emit -将事件传播到父节点。$broadcast -向儿童传播事件。监听事件的方法，由$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/

2017-03-22 14:59:56

其他回答

根据angularjs事件文档，接收端应该包含这样结构的参数

@params

——{Object} event是包含事件信息的事件对象

——由被调用者传递的{Object}参数(注意，这只能是一个，所以总是在字典对象中发送更好)

美元的范围。$on('fooEvent'，函数(事件，args) {console.log(args)}); 从你的代码

另外，如果你想让共享信息在不同的控制器间可用，还有另一种方法可以实现，那就是angular服务。由于服务是单例的，信息可以跨控制器存储和获取。只需在该服务中创建getter和setter函数，公开这些函数，在服务中创建全局变量并使用它们存储信息

2017-04-09 16:04:20

首先，亲子范围关系确实很重要。你有两种可能触发事件:

$broadcast——向下分派事件到所有子作用域， $emit——通过作用域层次结构向上分派事件。

我对你的控制器(作用域)关系一无所知，但有几个选项:

If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl: function firstCtrl($scope) { $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(event, mass) { console.log(mass); }); } In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl). function firstCtrl($rootScope) { $rootScope.$broadcast('someEvent', [1,2,3]); } Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope: function firstCtrl($scope) { $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); }

2013-01-24 13:41:29

作用域可用于将事件传播、分派到作用域的子对象或父对象。

$emit -将事件传播到父节点。$broadcast -向儿童传播事件。监听事件的方法，由$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/

2017-03-22 14:59:56

下面的代码显示了两个子控制器，事件从它们向上分派到父控制器(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/

2015-05-08 14:36:56

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

2015-04-13 13:25:38

使用$scope。$emit和$scope.$on

推荐文章

最新文章

标签