试图在 2 个控制器之间共享一个动态变量 - Angular [英] Trying to share a dynamic variable between 2 controllers - Angular

问题描述

变量名为searchText，它是用户在搜索框中输入的内容

Variable is named searchTextand it is what will be typed in the search box by the user

<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')//括号内是searchTeaxt

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

What I want to achieve is to hold the value of searchText and use in 2 different controllers to pass the searchText in URL to receive data. So I get the variable in the serivce and share that service with 2 controllers:

 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();
    }]);

推荐答案

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

Why don't you actually save the variable in the service? Since the service is a single instance and you can access that variable across controllers.

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


};

这种方式可以在一个控制器中设置变量，然后在另一个控制器中使用服务方法访问它，不需要任何 rootScope 的东西.

This way can set the variable in 1 controller then access it in another controller with the service methods, no need to have any rootScope stuff going on.

所以在Controller A中你可以先设置变量——

So in the Controller A you can set the variable first -

(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);

然后在Controller 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

这篇关于试图在 2 个控制器之间共享一个动态变量 - Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！