Question

我有两个控制器ParentController和ChildController我在ParentController中有一个变量，我需要将该变量传递给ChildController，然后我需要将它传递给视图，还有一件事我应该不要在子控制器和parentController中使用$ scope。是否有可能？如果没有办法在$ 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>

如何从parentcontroller获取值到html视图。

Answer 1

您可以在控制器中使用广播和开启 -

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;
});

});

Answer 2

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

创建服务

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 !!

Answer 3

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

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

2＆amp;其他答案中已经提供了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...";

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

3 个答案: