如何从一个控制器获取变量，然后将相同的变量传递给查看答案

【问题标题】：How can i get a variable from one controller and then pass the same variable to view如何从一个控制器获取变量，然后将相同的变量传递给查看
【发布时间】：2017-02-22 17:10:43
【问题描述】：

我有两个控制器 ParentController 和 ChildController 我在 ParentController 中有一个变量，我需要将该变量传递给 ChildController，然后我需要将它传递给视图，还有一件事是我不应该使用 $子控制器和父控制器的范围。有可能吗？如果没有，有没有办法在没有 $scope 的情况下使用它。

app.controller('ParentController', function($scope) {
    $scope.exampleVariable = "test";
});

app.controller('ChildController', function($scope, $controller) {
  var someScopeVariable = this;
  $controller('ParentController', {$scope: someScopeVariable });
  console.log(someScopeVariable.exampleVariable) 
  someScopeVariable.exampleVariable = "Updatetest";
});

现在在我的 html 视图中我需要使用 exampleVariable

喜欢这个

<div ng-controller="ChildController as child">
     <h1>{{child.exampleVariable}}</h1>
</div>

如何从父控制器获取值到 html 视图。

【问题讨论】：

标签： angularjs

【解决方案1】：

您始终可以使用服务在控制器之间共享数据。

创建服务

app.service('myservice', function() {
   var myVar; 

   this.setMyVar = function(value){
      this.myVar = value
   }

   this.getMyVar = function(){
         return this.myVar;
   }
});

将其作为依赖项传递，您可以共享该值。

app.controller('ParentController',['$scope', 'myservice', function($scope, myservice) {
     $scope.exampleVariable = "test"; 
     myservice.setMyVar("test");
}]);

您也可以将它作为依赖项传递给其他控制器，并且可以在那里执行 getMyVar！

【讨论】：

【解决方案2】：

你可以在Controller中使用Broadcast和On-

app.controller('ParentController', function($scope) {
    var self = this;         
     $scope.$broadcast('exampleVariable', 'test');
});

在子控制器中 -

app.controller('ChildController', function($scope, $controller) {
var someScopeVariable = this;
$controller('ParentController', {$scope: someScopeVariable });
  console.log(someScopeVariable.exampleVariable) 

 $scope.$on('exampleVariable', function(event, data) {
 someScopeVariable.exampleVariable = data;
});

});

【讨论】：

我需要修改子控制器中的exampleVariable。如果我们像你上面提到的那样写是不可能的

【解决方案3】：

有一些方法可以实现这一目标。

1. Through $rootScope.
2. By Creating Service.
3. Inheriting parent controller to children controller.

2 & 3 已在其他答案中提供。如果您想使用$rootScope 实现它，请按照此操作。

JS：

var app = angular.module('myApp', []);

app.controller('ParentController', function($scope, $rootScope) {
    $rootScope.exampleVariable = "test";
});

app.controller('ChildController', function($scope) {

});

HTML：

<div ng-controller="ParentController">
  Parent Controller : {{exampleVariable}}
  <hr/>
</div>
<div ng-controller="ChildController">
   Children Controller : {{exampleVariable}}
</div>

DEMO LINK.

注意：您还可以通过在ChildController 中添加以下代码来覆盖子控制器中的范围变量：

$scope.exampleVariable = "overriding...";

【讨论】：