Question

我在Angularjs中有两个控制器，并希望在这些控制器之间使用范围。在第一个控制器中，我从服务器获取数据并放入scope.myData。这个范围有很多我写一个项目的项目。在第二个控制器中我有查询范围，由第一个控制器的myData.title范围初始化。但myData.title范围对于第二个控制器是不正确的，因为它具有正确的值。事实上，当我写它时，不会将myData.title值发送到init函数，这样第二个控制器中的{{myData.title}}显示它的值。我的问题是什么？

我的代码是这样的：

  app.controller("Controller1",function ($scope, $http) {
     $scope.myData = {
        title:""
      }
        $scope.getData = function(){
    if(marketerId != null){
        $http.get('/getData')
            .success(function(data, status, headers, config) {
                $scope.myData = data;
            })
            .error(function(error, status, headers, config) {
                console.log(status);
            });
       }
   };
  }

我的第二个控制器是

   app.controller("Controller2",function ($scope, $http) {
       $scope.query = "";
       this.init = function (query) {
        $scope.query = query;
    }
   }

在html页面中我的代码是：

      <div ng-controller='controller1 as c1'>
        <div ng-controller='controller2'>
            <input type='text' ng-model='query' ng-init='c1.init(myData.title)' >
        </div>
      </div>

Answer 1

您可以使用rootScope，它在所有控制器之间共享。

更好的方法是创建一个服务，负责存储和获取数据，并让两个控制器都使用此服务。然后他们都可以访问数据。

Answer 2

对于角度来说，有一些基本的全球规则。

1）子控制器访问父控制器的范围（仅当未在子级中创建新范围时）。

2）要在两个控制器之间共享数据，请使用服务/工厂。

为您的例子

  <div ng-controller='controller2'>
     <input type='text' ng-model='query' ng-init='query = myData.title'> 
  </div>

OR

 app.controller("Controller2",function ($scope, $http) {

      $scope.query = $scope.myData.title;   
 }

Answer 3

试试这个，

<div ng-controller='Controller1 as c1'>
    <div ng-controller='Controller2 as c2'>
        <input type='text' ng-model='query' ng-init='c2.init(c1.myData.title)' >
    </div>
</div>

**请注意控制器名称，它应与您的js文件匹配。

**我建议始终使用controllerAs语法，也请使您的实例名称更易读/可理解。

Answer 4

您可以像这样创建服务：

 app.factory('SharedData', function(){
   var sharedData='';
   return {
      getSharedData : function(){
         return sharedData;
      },
      setSharedData : function(data){
         sharedData = data;
      }
   };
 })

然后在你的第一个控制器中添加：

 app.controller("Controller1",function ($scope, $http, SharedData) {
     $scope.$watch('SharedData', function(data) {
         SharedData.setPricingData(data);
     });
 }

在第二个：

 app.controller("Controller2",function ($scope, $http, SharedData) {
     $scope.$watch(function() { return SharedData.getSharedData();  },
                function(data) {$scope.sharedData= data;});;
 }

在Angularjs中使用控制器之间的范围

4 个答案: