试图在2个控制器之间共享动态变量 - Angular

时间:2015-08-07 07:59:04

标签: angularjs service controller

变量名为searchText,它将由用户在搜索框中输入

<input type="text" class="form-control" ng-model="searchText"  placeholder=" Type KvK-nummer and Press Enter" id="typehead">

示例网址:http://localhost:8091/odata/dll-poc-dv/Account('41-125061-0000') //in brackets is the searchTeaxt

我想要实现的是保持searchText的值并在2个不同的控制器中使用以传递URL中的searchText来接收数据。所以我在服务中获取变量并与2个控制器共享该服务:

 angular.module('serviceModule',[])
        .factory('dataService',['$http', dataService]);

    function dataService($http,$rootScope,$scope){
      return{
            getSearchText:getSearchText,
            setSearchText: setSearchText,
            getMainData: getMainData
        };
     var searchText;

   function setSearchText(value){
         searchText = value;
      };
   function getSearchText(){
        return searchText;
    };

   function getMainData(id){
       return $http.get("http://localhost:8091/odata/dll-poc-dv/Account(kvk='"+id+"')").then(
            function (result){ console.debug(result);return result.data.d.results})

    };
$scope.$watch('searchText',function(newVal,oldVal){
            console.log(newVal,oldVal);
        })
};

第一控制器:

    angular.module('mainPage',['serviceModule'])
      .controller('MainCtrl',['$scope', '$http','dataService', function ($scope, $http,dataService) {

   dataService.setSearchText($scope.searchText);

    $scope.getMainData = function(kvk){ 
    $scope.getMainData = function(){
        dataService.getMainData($scope.searchText).then(function(data){
            $scope.getData= data;
        })
        };

      }]);

第二名管制员:

angular.module('profileDetail',['serviceModule'])
    .controller('ProfileCtrl', ['$scope','$filter','$http','$q','$routeParams','dataService','moment',function($scope,$filter,$http,$q,$routeParams,dataService,moment){
        // initial grab of the right data
        function init (){

        var searchText = dataService.getSearchText();

        dataService.getMainData(searchText).then(function(data){
            $scope.getData = data;
        });
    }

     init();
    }]);

1 个答案:

答案 0 :(得分:5)

为什么不在服务中实际保存变量?由于该服务是单个实例,因此您可以跨控制器访问该变量。

angular.module('app')
   .factory('dataService',['$http', dataService]);



    function dataService($http,$rootScope,$scope){
    var searchText = "";

    function setSearchText(value) {
        searchText = value;
    }

    function getSearchText() {
        return searchText;
    }

      return{
          setSearchText: setSearchText,
          getSearchText: getSearchText
      };


};

这种方式可以在1个控制器中设置变量,然后使用服务方法在另一个控制器中访问它,不需要继续使用任何rootScope。

因此,在控制器A 中,您可以先设置变量 -

(function (angular) {
'use strict';

angular.module('app')
    .controller('ControllerA', ['dataService', ControllerA]);

function ControllerA(dataService) {
    var vm = this;

    // Set the variable from this controller
    dataService.setSearchText("blabla");

};
})(window.angular);

然后在控制器B -

中访问它
(function (angular) {
'use strict';

angular.module('app')
    .controller('ControllerB', ['dataService', ControllerB]);

function ControllerB(dataService) {
    var vm = this;

    // Set the variable from this controller
    var searchText = dataService.getSearchText();

};
})(window.angular);

plnkr:http://plnkr.co/edit/iO7QTY7OBYLEqGuIhCJO?p=preview