angularjs:从 Controller 一中的模板获取值并从 Controller 二中读取该值

Question

搜索.html

<div ng-app="geonode_main_search">
                          {% verbatim %}
                          <div ng-controller="aerial_search_controller">

                              <div class="form-group col-md-8" id="state">
                                <label >State</label>
                                <select class="form-control" ng-model="m.state_id" ng-change="loadStateDistrict(m.state_id)" ng-options="w.state_id as w.state_name for w in roles">
                                  <option value="0">-Select State-</option>
                                </select>
                              </div>

                              <div class="form-group col-md-8" id="district" >
                                <label >District</label>
                                <select class="form-control"  ng-model="w.districtid" ng-change="loadDistrict(w.districtid)" ng-options="w.districtid as w.district_id for w in StateDistrictList">
                                  <option value="0">-Select District-</option>
                                </select>
                              </div>


                               <div class="form-group col-md-8" >
                               <!-- <label  >{% trans "Lat" %} :</label> -->
                               <input class="form-control" type="hidden" ng-repeat="item in districtList" ng-model="item.lat_wgs" name="lat_wgs" id="lat_wgs" value={{item.lat_wgs}}>
                              </div>

                              <div class="form-group col-md-8" >
                               <!-- <label  >{% trans "Long" %} :</label> -->
                               <input class="form-control" type="hidden" ng-repeat="item in districtList" ng-model="item.long_wgs" name="long_wgs" id="long_wgs" value={{item.long_wgs}}>
                              </div>

                            <div class="form-group col-md-8">
                                <a href="map/aerial_list" class="btn btn-primary pull-right" ng-repeat="item in districtList"  ng-click="add(item)"  class="btn btn-danger">Search</a>
                            </div>

          </div>

     {% endverbatim %}           
    </div>

第一个 Controller :

module.controller("aerial_search_controller", [ '$scope','$rootScope', '$http', function($scope, $rootScope,$http) {

    $scope.roles = [];
    $http.get("/rest/v1/state/").success(function(data){ 
    $scope.roles = data.objects;

    $scope.state_districts = [];
    $http.get("/rest/v1/state_district/").success(function(data){ 
    $scope.state_districts = data.objects;

    $scope.districts = [];
    $http.get("/rest/v1/district/").success(function(data){ 
    $scope.districts = data.objects;


    $scope.click=function(data)
        {   
          console.log(data.state_id);
          console.log(data.districtid);
        }
    $scope.loadStateDistrict=function(id)
    {
      // console.log(id);
        $scope.StateDistrictList=[];
        angular.forEach($scope.state_districts,function(state_district)
                        {
                            if(state_district.stateid==id)
                            {
                                $scope.StateDistrictList.push(state_district);
                            }
                        })
    };

    $scope.loadDistrict=function(id)
    {
        $scope.districtList=[];
        angular.forEach($scope.districts,function(district)
                        {
                            if(district.district_id==id)
                            {
                                $scope.districtList.push(district);
                                $rootScope.lat = district.lat_wgs;
                                $rootScope.lng = district.long_wgs;
                                console.log($rootScope.lat);
                                console.log($rootScope.lng);

                            }
                        })


    }; // end $scope.loadDistrict

    });
    });
    });

        $scope.add = function(item) {
            $rootScope.lat = item.lat_wgs;
            $rootScope.lng = item.long_wgs;

        };

}]);

第二个 Controller :

module.controller("geo_search_controller", [ '$scope','$rootScope', '$http', function($scope, $rootScope,$http) {
    angular.extend($scope, {

                map_center: {
                  lat: $rootScope.lat,
                  lng: $rootScope.lng,
                  zoom: 10.5
                },
                defaults: {
                  zoomControl: true
                },

                layers: {
                    baselayers: {
                        base_map: definedLayers.base_map
                    },
                    overlays: {
                        pc: definedOverlays.pc,
                        fl: definedOverlays.fl,
                    }
                }

            });
}]);

你好，我是 angularjs 的新手。此代码显示我从 search.html 获取值 $rootScope.lng 和 $rootScope.lat 并解析到第一个 Controller 。我的问题是我想从第一个 Controller 获取值 $rootScope.lng 和 $rootScope.lat 并在第二个 Controller 中解析它。

Answer 1

在 Controller 之间传递值的最简单、最好的方法是使用Angular Service。

服务

module.factory('commonService', function() {

   var seriveContext = {
      lat : null,
      lon : null
   }

    return serviceContext;

});

创建服务后，您可以使用 DI(依赖注入(inject))将其传递给 Controller ​​并使用它。就您而言，

module.controller("aerial_search_controller", 
[ '$scope', '$http', 'commonService', function($scope, $http, commonService) {

   // set values with in service
   commonService.lat = $sope.lat;
   commonService.lon = $scope.lon;

}]);

现在在您的第二个 Controller 中，您可以使用相同的服务

module.controller("geo_search_controller", 
[ '$scope', '$http', 'commonService', function($scope, $http, commonService)
{


    // get value from service
    $scope.lat = commmonService.lat;
    $scope.lon = commonService.lon;

}]);

请注意， angular.service 是单例对象。