Question

我正在使用AngularJS构建一个Web应用程序，并且无法将数据从子视图传递到父视图控制器。

在页面加载时，我从服务中获取数据（例如用户名）。

我想将此值传递给我的母版页，但目前无法将该值传递给我的母版页控制器。出于这个原因，我要求我的服务中的数据两次（每页一个）。

如何与父视图共享此值？

Answer 1

您可以使用$ rootScope.yourVariable而不是$ scope.yourVariable。

Answer 2

案例1：

使用$emit事件将值从子控制器传递给父控制器。 Read docs for more info

案例2：

使用$broadcast事件将值从父控制器传递到子控制器。 Read docs for more info

 $socpe.$broadcast("Some Value", $scope.someVar);

并在其他控制器中收到：

$scope.$on("Some Value", function(event, value){
  console.log(value);
});

案例3：

如果控制器是兄弟姐妹，请使用$rootscope到$broadcast事件。

 $rootscope.$broadcast("Some Value", $scope.someVar);

并在其他控制器中收到：

$scope.$on("Some Value", function(event, value){
  console.log(value);
});

示例：

在示例中，我使用了$timeout，它将被您的服务调用替换。如超时调用中所述，变量将在2秒后更新。

＆＃13;

angular
  .module("app", [])
  .controller("ParentCtrl", function($scope, $timeout){
    $scope.parentVar = "This var belogs to ParentCtrl";
    $scope.childSharedValue = "Waiting for ChildCtrl to pass value";
    
    $scope.$on("Child Value", function(event, value){
      $scope.childSharedValue = value;
    });

    $timeout(function(){
       $scope.$broadcast("Parent Value", $scope.parentVar);
    }, 2000);
  })
  .controller("ChildCtrl", function($scope, $timeout){
    $scope.childVar = "This var belogs to ChildCtrl";
    $scope.parentSharedValue = "Waiting for ParentCtrl to pass value";
    
    $scope.$on("Parent Value", function(event, value){
      $scope.parentSharedValue = value;
    });

    $timeout(function(){
       $scope.$emit("Child Value", $scope.childVar);
    }, 2000);
  })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ParentCtrl">
  Parent Value: {{ parentVar}}<br />
  Child Shared Value: {{ childSharedValue }}<br /><br />
  <div ng-controller="ChildCtrl">
  Child Value: {{ childVar}}<br />
  Parent Shared Value: {{ parentSharedValue }}<br />
  </div>
</div>

＆＃13;

如何将值传递给父控制器？

2 个答案: