1. 程式人生 > >angular之$on、$emit、$broadcast

angular之$on、$emit、$broadcast

切換 $scope loaded func emit col ams root cnblogs

1.$scope.$on

view事件

//View被加載但是DOM樹構建之前時: 

$scope.$on(‘$viewContentLoading‘, function(event, viewConfig){ ... }); 

//View被加載而且DOM樹構建完成時: 

$scope.$on(‘$viewContentLoaded‘, function(event){ ... }); 

//路由路徑發生改變時 current:要到達的路徑 previous:上一個路徑

$scope.$on(‘$locationChangeStart‘, function (event, current, previous) {  });

//銷毀事件

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

ng-route路由有幾個常用的事件:

$routeChangeStart:這個事件會在路由跳轉前觸發

$routeChangeSuccess:這個事件在路由跳轉成功後觸發

$routeChangeError:這個事件在路由跳轉失敗後觸發

$scope.$on("$routeChangeStart",function(event, current, previous){ });

頁面刷新:$route.reload();

ui-router

使用angular來做項目時,習慣性的使用第三方路由插件

ui-router配置路由。每一個狀態都對應著一個頁面,因此對路由狀態改變的監聽也變的十分重要。可以使用:$rootScope.$on…….)監聽

$stateChangeStart: 表示狀態切換開始

$stateNoFound:沒有發現

$stateChangeSuccess:切換成功

$stateChangeError:切換失敗

$rootScope.$on(‘$stateChangeStart‘, function(event, toState, toParams, fromState, fromParams){ ... })

回調函數的參數解釋:event:當前事件的信息,toState:目的路由狀態

,toParams:傳到目的路由的參數,fromState:起始路由狀態,toParams:起始路由的參數;

2.父子controller傳值

子級傳遞數據給父級  

// 子級傳遞  
$scope.checkLoggedIn = function(type) {  
          $scope.transferType = type;  
         $scope.$emit(‘transfer.type‘, type);  
}  
 
// 父級接收  
$scope.$on(‘transfer.type‘, function(event, data) {  
         $scope.transferType = data;  
        });  
       $scope.checkLoggedIn = function() {  
         var type = $scope.transferType;  
        }

父級傳遞數據給子級

// 父級傳遞  
$scope.transferType = ‘‘;  
$scope.checkLoggedIn = function(type) {  
          $scope.transferType = type;  
          $scope.$broadcast(‘transfer.type‘, type);  
}  
  
// 子級接收  
$scope.transferType = ‘‘;  
$scope.$on(‘transfer.type‘, function(event, data) {  
         $scope.transferType = data;  
        });  
        $scope.checkLoggedIn = function() {  
          var type = $scope.transferType;  
}  

angular之$on、$emit、$broadcast