在angularjs中跨多个控制器更新范围变量

发布时间：2020-12-17 17:56:17 所属栏目：安全来源：网络整理

导读：我有两个控制器 – searchBoxController和productList.我想要做的是从多个控制器更新范围变量$scope.products.我知道将它定义为根变量是一个非常糟糕的设计 – 但将其放在共享服务中并不能解决问题.更新未反映在 HTML模板中！ function SearchTermService(){

我有两个控制器 – searchBoxController和productList.我想要做的是从多个控制器更新范围变量$scope.products.我知道将它定义为根变量是一个非常糟糕的设计 – 但将其放在共享服务中并不能解决问题.更新未反映在 HTML模板中！

function SearchTermService(){
    this.productSearch = function(data,$http){
        var url = "";
        $http.get(url).then(function(resp){
            return resp.data;
        },function(err){
            console.log(err);
        });
    };
};

var app = angular.module('app',[]);
app.service("myService",MyService);
app.service("searchTermService",SearchTermService);
app.run(function($rootScope) {
    $rootScope.products = new Date();
});

app.controller('productList',function ($scope,$rootScope,$http,myService) {
    $rootScope.products = prod_res;
});



app.controller('searchBoxController',function($scope,searchTermService,$rootScope){
        $scope.getSearchResults = function(){
        $rootScope.products = searchTermService.productSearch($scope.term,$http)
    };
});

PS：我不确定在’searchBoxController’中分配$rootScope.products时是否需要返回一个promise,因为console.log表示未定义.目前我没有从服务中退回承诺.

解决方法

为了在多个控制器上更新范围变量,您可以使用角度服务.

您应该使用它,因为所有角度服务都是单例,因此您可以轻松共享通用逻辑,在控制器之间共享数据.

我做了一个例子,我使用服务来更新一些数据.然后,我的工厂返回一个对象数据,因此我们将获得一个对象,而不仅仅是一个固定值.多亏了这一点,我们的数据将会更新,我们将保留绑定数据.

调节器

(function(){

function Controller($scope,$timeout,Service) {

  //Retrieve current data object of our service
  $scope.data = Service.value;

  //will be set to 4
  $timeout(function(){
    Service.set(4,'product');
  },1000);

}

angular
.module('app',[])
.controller('ctrl',Controller);

})();


(function(){

function Controller2($scope,Service) {

  //Retrieve current data object of our service
  $scope.data2 = Service.value;

}

angular
.module('app')
.controller('ctrl2',Controller2);

})();

服务

(function(){

  function Service() {

    //Our data object
    var data = {
      product: null
    };

    function set(value,field){
      data[field] = value;
    }

    return {
      set: set,value: data
    };


  }

  angular
    .module('app')
    .factory('Service',Service);

})();

HTML

<body ng-app='app'>

    <div ng-controller='ctrl'>
      <h2>Service value : {{data.product}}</h2>
    </div>

    <div ng-controller='ctrl2'>
      <h2>Service value from controller2 : {{data2.product}}</h2>
    </div>

  </body>

因此,我们将在多个控制器之间共享数据.通过使用服务,您可以避免使用$rootScope.

你可以看到Working plunker

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!