AngularJs 父子级Controller传递数据

最新推荐文章于 2021-08-25 16:58:31 发布

原创最新推荐文章于 2021-08-25 16:58:31 发布 · 201 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #众观千象 #每天进步一点点 #学习永无止境 #angularjs

js 专栏收录该内容

123 篇文章

订阅专栏

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

<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