美文网首页
angular之$on、$emit、$broadcast

angular之$on、$emit、$broadcast

作者: Sun____ | 来源:发表于2019-09-30 14:29 被阅读0次

    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

          本文链接:https://www.haomeiwen.com/subject/vyacpctx.html