Question

我有两个控制器 - 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, $http, searchTermService, $rootScope){
        $scope.getSearchResults = function(){
        $rootScope.products = searchTermService.productSearch($scope.term, $http)
    };
});

PS：我不确定在将＃rootScope.products分配到＆＃39; searchBoxController＆＃39;中时是否需要返回一个承诺，因为console.log表示未定义。目前我没有从服务中回复承诺。

Answer 1

要在多个控制器上更新范围变量，您可以使用角度服务。

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

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

<强>控制器

(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, $timeout, 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

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

1 个答案: