Question

我有这段代码：

控制器：

function deleteRootCategory(){
 $scope.rootCategories[0] = '';
}

function getCategories(){
  categoryService.getCategories().then(function(data){
    $scope.rootCategories = data[0];
    $scope.subCategories = data[1];
    $scope.titles = data[2];
  });
}

getCategories();

服务：

var getCategories = function(){
    var deferred = $q.defer();
    $http({
        method:"GET",
        url:"wikiArticles/categories"
        }).then(function(result){
          deferred.resolve(result);
        });
    }
    return deferred.promise;
}

HTML：

<div ng-controller="controller">
  <div ng-repeat="root in rootCategories"> {{root}} </div>
  <div ng-repeat="sub in subCategories"> {{sub}} </div>
  <div ng-repeat="title in titles">{{title}}</div>
</div>

HTML2：

<div ng-controller="controller">
 <div ng-include src="html"></div>
 <button ng-click="deleteRootCategory()">Del</button>
</div>

当我点击deleteRootCategory按钮时，数组$ scope.rootCategories会更新，但视图不会改变。

我错过了什么？

由于

Answer 1

您可能希望在服务中更改值时设置广播事件。这样的事情。

.service("Data", function($http, $rootScope) {
  var this_ = this, 
      data;

  $http.get('wikiArticles/categories', function(response) {
    this_.set(response.data);
  }

  this.get = function() {
    return data;
  }

  this.set = function(data_) {
    data = data_;
    $rootScope.$broadcast('event:data-change');
  }

});

让两个控制器等待事件，并使用该集对数组进行任何更改。

$rootScope.$on('event:data-change', function() {
    $scope.data = Data.get();
}

$scope.update = function(d) {
  Data.set(d);
}

如何在两个控制器中使用来自一个服务的完全相同的数组？

1 个答案: