Question

我正在尝试在控制器之间传输数据。

所以这是我第一个使用http-

加载页面时首先获取数据的控制器

function GetController($scope, $http) {
    $http.defaults.useXDomain = true;
    $http({
        method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
            'Authorization': apiKey
        },
        data: { "query": "grocery", "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }
    }).then(function successCallback(response) {
        $scope.products = response.data;
    }).then(function errorCallback(error) {
    })
}

视图看起来像 -

 <div  ng-controller="GetController">
            <div class="mdl-cell" ng-repeat="product in products">
                 <img src="{{product.largeImage}}" />
                  <div class="mdl-card__title">
                    <h6 class="mdl-card__title-text">{{product.name}}</h6>
                </div>
            </div>
        </div>
    </div>

现在我的需要是使用相同的请求但不同的参数重新绑定此HTML。所以我为这份工作创建了另一个控制器 -

function searchProductsController($scope, $http) {
    $http.defaults.useXDomain = true;
    $scope.searchText = "";
    $scope.submit = function () {
        $http({
            method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
                'Authorization': apiKey
            },
            data: { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }
        }).then(function successCallback(response) {
            $scope.products = response.data; //how to bind this with GetController's $scope.products??
        }).then(function errorCallback(error) {
        });
    }
};

需要什么 -

我想将$scope.products的{{1}}绑定到searchProductsController GetController's，以便在视图中呈现。

我现在不知道如何做到这一点，因为我对角度很新。但是，我已尝试为转移目的创建服务，但实际上并不知道如何将其与它集成。

修改 -

我编辑了控制器方法，因为@Varkal建议使用服务，仍然无法解决问题。

$scope.products

Answer 1

当您需要在控制器之间共享内容时，这些内容应该在service

中

例如：

angular.service("datasService", function ($http) {
  this.getDatas = function getDatas() {
    return $http({
      method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
        'Authorization': apiKey
      },
      data: { "query": "grocery", "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }
    })
  }
  return this
});

在你的控制器中：

function GetController($scope, datasService) {
  datasService.getDatas().then(function(){
    $scope.products = response.data
  }
}

这是一个非常简单的示例：您还可以将数据存储在服务中，因此只需调用$ http一次，并添加一个方法来刷新产品列表

这是＆＃34; Angular-ly＆＃34;控制器之间共享数据的方式，但你也可以使用localStorage（ngStorage可以在这里帮助你）

Answer 2

如果您有2个views和2个controllers，则可以通过服务和工厂在控制器之间共享$scope变量（数据）。但是，$scope变量是控制器本身的本地变量，因此将数据设置到服务或工厂以了解该特定变量。我更喜欢使用工厂，简单而平滑的黄油。如果您在单独的文件中使用service或factory，则需要将该文件包含在index.html中。

 app.controller('Ctrl1', function($scope, myService, $state) {
    $scope.variable1 = "One";
    myService.set($scope.variable1);
    $state.go('app.thepagewhereyouwanttoshare'); //go to the page where you want to share that variable.
});

app.controller('Ctrl2', function($scope, myService) {
    console.log("shared variable " + myService.get());
});
.factory('myService', function() {
    function set(data) {
        products = data;
    }

    function get() {
        return products;
    }

    return {
        set: set,
        get: get
    }

})

此外，您可以使用localstorage来共享数据。localStorage附带angularjs，因此无需在控制器或应用中注入任何其他依赖项。在必须传递数据的控制器中：

localStorage.setItem("products",$scope.products);

在您访问数据的控制器中：

localStorage.getItem("products");

在您的情况下：

function GetController($scope, $http) {
    $http.defaults.useXDomain = true;
    $http({
        method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
            'Authorization': apiKey
        },
        data: { "query": "grocery", "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }
    }).then(function successCallback(response) {
        $scope.products = response.data;
        localStorage.setItem("products",$scope.products);
    }).then(function errorCallback(error) {
    })
}

function searchProductsController($scope, $http) {
    $http.defaults.useXDomain = true;
    $scope.searchText = "";
    $scope.submit = function () {
        $http({
            method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
                'Authorization': apiKey
            },
            data: { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" }
        }).then(function successCallback(response) {
            $scope.products = response.data; //how to bind this with GetController's $scope.products??
            $scope.productsFromGetController = localStorage.getItem("products");
        }).then(function errorCallback(error) {
        });
    }
};

使用factory，您需要在设置后导航到要获取数据的页面，因为数据集可能被另一个视图中的另一个集合覆盖。

最终更新：使用服务和工厂

   <html>

   <head>
      <title>Angular JS Controller</title>
      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>

   <body>
      <h2>AngularJS Sample Application</h2>

      <div ng-app = "app" >

           <div ng-controller="searchProductsController">
             <input ng-model="searchText"/>
                <button ng-click="setPlace(searchText)">Enter Search id</button>
            </div>
            <div ng-controller="GetController">
              <div ng-repeat="product in products">
                                <h3>{{product.name}}</h3>
                </div>
              </div>
      </div>


<script>
         var app = angular.module('app', []);

        app.factory("Service", function () {
          var data;
             function getdata() {
                return data;
            }
            function setdata(newdata) {
                data = newdata;
            }
            return {
                getdata: getdata,
                setdata: setdata,
            }
        }).factory("dataService",function($http){
          return{
            getComments:function (roomid){
                   if(roomid==1){
                     var data = [{"name":"alex","place":"kathmandu"},{"name":"god","place":"seattle"}];
                     return data;
                   }
                   if(roomid==2)
                   {
                     var newdata = [{"name":"newname","place":"kathmandu"},{"name":"newname2","place":"seattle"}];
                     return newdata;
                   }
              }
          }
        });
        app.controller('searchProductsController',function($scope, Service,$http,dataService) {
          var data = dataService.getComments(1);
          Service.setdata(data);
            $scope.setPlace = function (searchText) {
                var newdata = dataService.getComments(searchText);
                Service.setdata(newdata);
            }
        })
        .controller('GetController',function($scope, Service) {
            $scope.$watch(function () {
                return Service.getdata();
            }, function (value) {
                $scope.products = value;
            });
        })
              </script>

   </body>
</html>

关于您的未工作的plunker的更新：

我可以通过你controller的模拟得到最接近的： http://plnkr.co/edit/p9qY1IIWyzYGLehsIOPr?p=preview

如何在控制器之间传输数据

2 个答案: