angular之$on、$emit、$broadcast
阿新 • • 發佈:2017-09-16
切換 $scope loaded func emit col ams root cnblogs 1.$scope.$on
ui-router配置路由。每一個狀態都對應著一個頁面,因此對路由狀態改變的監聽也變的十分重要。可以使用:$rootScope.$on(…….)監聽
,toParams:傳到目的路由的參數,fromState:起始路由狀態,toParams:起始路由的參數;
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來做項目時,習慣性的使用第三方路由插件
$stateChangeStart: 表示狀態切換開始
$stateNoFound:沒有發現
$stateChangeSuccess:切換成功
$stateChangeError:切換失敗
$rootScope.$on(‘$stateChangeStart‘, function(event, toState, toParams, fromState, fromParams){ ... })
回調函數的參數解釋:event:當前事件的信息,toState:目的路由狀態
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