Fatal编程技术网
  • angularjs/
  • Angularjs 如何在控制器之间传输数据

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

angularjs

Angularjs 如何在控制器之间传输数据,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我正在尝试在控制器之间传输数据 这是我的第一个控制器，当使用http加载页面时，它首先获取数据- function GetController($scope, $http) { $http.defaults.useXDomain = true; $http({ method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: { 'Authorization

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

这是我的第一个控制器，当使用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>
需要什么-

我想将
searchProductsController
的
$scope.products
绑定到
GetController的
$scope.products
，以便它在视图中呈现

我现在不知道该怎么做，因为我是个新手。
然而，我已经尝试创建了一个用于转移目的的服务，但不知道如何将其与之集成

编辑-

我已经编辑了@Varkal建议使用服务的控制器方法，但仍然无法解决问题


var app = angular.module("productsApp", [])
    .service("serviceProvider", function ($http) {
        this.getDatas = function getDatas(data) {
            return $http({
                method: 'POST', url: serviceUrl + '/GetProductsByCategoryOrName', headers: {
                    'Authorization': apiKey
                },
                data: data
            })
        }
        return this
    });

function GetController($scope, serviceProvider) {
    var data = { "query": "grocery", "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" };
    serviceProvider.getDatas(data).then(function (response) {
        $scope.products = response.data.data;
    });
}

function searchProductsController($scope, serviceProvider) {
    var data = { "query": $scope.searchText, "categoryId": "976759", "pageIndex": 0, "sortDirection": "asc" };

    $scope.submit = function () {
        serviceProvider.getDatas(data).then(function (response) {
            console.log(response.data.data);
            $scope.products = response.data.data;
        });
    }
};



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

例如：


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一次，并添加一个方法来刷新产品列表


这是在控制器之间共享数据的最“灵活”的方式，但您也可以使用localStorage（在这里可以帮助您）
当您需要在控制器之间共享内容时，这些内容应该在

例如：


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一次，并添加一个方法来刷新产品列表


这是在控制器之间共享数据的最“灵活”的方式，但是您也可以使用本地存储（在这里可以帮助您）
如果您有2个
视图
和2个
控制器
，则可以通过服务和工厂在控制器之间共享
$scope
变量（数据）。但是，
$scope
变量是控制器本身的本地变量，因此将数据设置为服务或工厂以了解特定变量。我更喜欢使用工厂，简单而流畅。如果在单独的文件中使用
服务
或
工厂
，则需要将该文件包含在
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) {
        });
    }
};


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

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


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




角度控制器
AngularJS示例应用程序
输入搜索id
{{product.name}
var-app=angular.module（'app'，[]）；
应用程序工厂（“服务”，功能（）{
var数据；
函数getdata（）{
返回数据；
}
函数setdata（newdata）{
数据=新数据；
}
返回{
getdata:getdata，
setdata:setdata，
}
}).factory（“数据服务”，函数（$http）{
返回{
getComments:函数（roomid）{
if（roomid==1）{
var数据=[{“名称”：“亚历克斯”，“地点”：“加德满都”}，{“名称”：“上帝”，“地点”：“西雅图”}]；
返回数据；
}
if（roomid==2）
{
var newdata=[{“名称”：“新名称”，“地点”：“加德满都”}，{“名称”：“新名称2”，“地点”：“西雅图”}]；
返回新数据；
}
}
}
});
app.controller（'searchProductsController'，函数（$scope，Service，$http，dataService）{
var data=dataService.getComments（1）；
服务设置数据（数据）；
$scope.setPlace=函数（searchText）{
var newdata=dataService.getComments（searchText）；
Service.setdata（newdata）；
}
})
.controller（'GetController'，函数（$scope，Service）{
$scope.$watch（函数（）{
return Service.getdata（）；
}，函数（值）{
$scope.products=价值；
});
})


关于您的未加工垃圾的更新：

这是我能用你的
控制器模拟得到的最接近的：

如果您有两个
视图
和两个
控制器
，则可以通过服务和工厂在控制器之间共享
$scope
变量（数据）。但是，
$scope
变量是控制器本身的本地变量，因此将数据设置为服务或工厂以了解特定变量。我更喜欢使用工厂，简单而流畅。如果在单独的文件中使用
服务
或
工厂
，则需要将该文件包含在
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) {
        });
    }
};


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

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


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




角度控制器