$ rootScope。$ on与$ scope。$ on之间的差异

这是一个很好的问题，有一个解释给您。

首先请注意：

• $scope.on('event');

  会听

  $scope.$broadcast('event')

  ＆

  $rootScope.$broadcast('event')

• $rootScope.on('event');

  会听

  $rootScope.$broadcast('event')

  ＆

  $rootScope.$emit('event')

接下来，您需要注意：

• $scope.on();

  当控制器失去它在视图或组件中的表示形式时（被销毁），它将被自动销毁。
• 您需要

  $rootScope.$on()

  手动销毁。

>>如何销毁示例

$rootScope.on()

：

//bind eventvar registerScope = $rootScope.$on('someEvent', function(event) {    console.log("fired");});// auto clean up `$rootScope` listener when controller getting destroy// listeners will be destroyed by calling the returned function like registerScope();$scope.$on('$destroy', registerScope);

>>>从Angular v1.5开始，我们可以使用组件生命周期以一种不错的方式管理初始化和销毁​​：

var myApp = angular.module('myApp',[]);myApp.controller('MyCtrl', function ($scope, $rootScope) {  var registerScope = null;  this.$onInit = function () {    //register rootScope event    registerScope = $rootScope.$on('someEvent', function(event) {        console.log("fired");    });  }  this.$onDestroy = function () {    //unregister rootScope event by calling the return function    registerScope();  }});

此plnkr将为您显示

$scope.on()

$rootScope.on()

通过在此插入控件中切换视图，控制器将重新绑定到您的视图。该

$rootScope.on();

$rootScope.on()

$scope.on()

$emit

＆之间的区别

$broadcast

是：

• $rootScope.$emit()

  事件仅触发

  $rootScope.$on()

  事件。

• $rootScope.$broadcast()

  将触发

  $rootScope.$on()

  ＆

  $scope.on()

  事件（几乎所有听到此事件的事件）。

• $scope.$emit()

  将触发其所有

  $scope.$on

  所有父项（父级控制器中的作用域）和

  $rootScope.$on()

  。

• $scope.$broadcast

  将仅触发

  $scope

  及其子项（子控制器中的作用域）。