AngularJs 父子级Controller传递数据

iteye_13003

于 2014-11-11 17:05:22 发布

阅读量193

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签：乔乐共享众观千象每天进步一点点学习永无止境 angularjs

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82608964

js 专栏收录该内容

123 篇文章

订阅专栏

本文介绍了AngularJS中实现父子组件间数据通信的方法。通过使用$scope提供的$broadcast, $on和$emit方法，详细展示了如何从子级向父级以及从父级向子级传递数据的具体实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div ng-controller="MyAccountCtrl">

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

   </div>

</div>

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

在线实例：http://each.sinaapp.com/angular/apps/app-broadcast.html