AngularJs 父子级Controller传递数据

最新推荐文章于 2021-01-27 11:42:39 发布

weixin_30908941

最新推荐文章于 2021-01-27 11:42:39 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/miny-simp/p/7266705.html

版权

HTML代码

<div ng-controller="MyAccountCtrl">  
  
   <div ng-controller="TransferCtrl">  
           .............  
  
   </div>  
  
</div>

js代码

// 子级传递数据给父级  
// 子级传递  
$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;  
}

js代码

// 父级传递数据给子级  
// 父级传递  
$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;  
}

应用实例：未读消息的个数显示

子级控制器js代码:

 1 $scope.messageView = function(data){
 2             $scope.currentMessage = data;
 3             ngDialog.open({
 4                 template: 'html/admin/messageView.html',
 5                 className: 'ngdialog-theme-plain custom-width-70',
 6                 scope: $scope,
 7                 cache: false,
 8                 controller: function(){
 9                     if(data.readStatus == 0){   //状态为0表示未读；
10                         $scope.$emit('messageCount', true);  //等于0的时候触发
11                     }
12                 }
13             });
14             if (data.readStatus == 1) return;
15             data.readStatus = 1;
16             $http.post($scope.URL + "message/updateMessage", data).success(function(){
17                 $scope.load();
18             });
19         };

View Code

父级控制器js代码:

 1 //未读消息个数
 2     $scope.unreadCount = function(){
 3         $scope.countForm={};
 4         $scope.userId = $scope.IPSUser.userId;
 5         $scope.countForm.userId = $scope.userId;
 6         $http.post($scope.URL+ 'message/getUnreadCount', $scope.countForm).success(function(data) {
 7             $scope.count = data.data.count;
 8         });
 9     }
10     $scope.unreadCount(); //进入主页以后先调用一次函数，显示未读个数
11     $scope.$on('messageCount', function(event, data) {
12         $scope.unreadCount();
13     });

View Code

直接在父级控制器js代码中用定时器控制刷新（子级js代码不要了），1s刷新一次后台数据，这样做缺点是请求次数太多

 1 $scope.unreadCount = function(){
 2         $scope.countForm={};
 3         $scope.userId = $scope.IPSUser.userId;
 4         $scope.countForm.userId = $scope.userId;
 5         $http.post($scope.URL+ 'message/getUnreadCount', $scope.countForm).success(function(data) {
 6             $scope.count = data.data.count;
 7         });
 8     };
 9     $interval(function(){
10         $scope.unreadCount();
11     },1000);