Question

我正在使用AngularJS，我有2个同级控制器。第一个控制器在点击时从$ http请求获取数据。第二个控制器必须检索此数据，但我不知道该控制器将如何获取数据，因为它必须等待第一个控制器中的功能才能获取数据。

这是第一个控制器：

$scope.getMessageData = function(username, full_url, main_item, item_id, sub_id){
    $scope.ajax_spinner = true;
    $http({
      method: "GET",
      url: "/getMessageData",
      params:{
        "adUsername" : username,
        "fullUrl" : full_url,
        "mainItem" : main_item,
        "tagId" : item_id,
        "subId" : sub_id
      }
    }).then(function successCallback(response) {
      $scope.adUsername = response.data.adUsername;
      $scope.fullUrl = response.data.fullUrl;
      $scope.main_item = response.data.main_item;
      $scope.message = response.data.docs[0];
      $scope.sub_item = response.data.sub_docs[0];
      $scope.ajax_spinner = false;
      Data.setItem($scope.message)
    });
  };

我用来与第二个控制器共享数据的工厂：

App.factory('Data', function(){
    return { 
    setItem: function(item){
        this.item = item;
    },
    getItem: function(){
        return this.item;
    }
    };
});

第二个控制器：

App.controller("dataController", function($scope, $http, $sce, Data){
  $scope.message = Data.getItem();
  console.log($scope.message)
});

现在显然$ scope.message是未定义的，因为控制器已经在页面加载时加载了，但是尚未准备好调用getMessageData函数，那么如何在激发getMessageData之前“等待”第二个控制器加载？

Answer 1

您可以在$watch中使用controller来跟踪service中的更改，例如

var unwatch = $scope.$watch(function() {
  /* set Data.item value in your service */
  return Data.item;
}, function(item) {
  $scope.item = item || 'nothing here';
});

$scope.$on('$destroy', unwatch);

或者您可以实现简单的机制来注册和注销服务中的回调，以便在数据发生更改时得到通知，例如

模板

<html ng-app="App">
  <head>
  ...
  </head>

  <body>
    <div ng-controller="SomeController">
      SomeController
      <button ng-click="getData()">Fetch</button>
      <div ng-bind="data | json"></div>
    </div>
    <br>
    <div ng-controller="OtherController">
      OtherController
      <div ng-bind="data | json"></div>
    </div>
  </body>
</html>

JavaScript

angular.module('App', [])

.controller('SomeController', function($scope, Data) {
  $scope.getData = function() {
    Data.getData().then(function(data) {
      $scope.data = data;
    });
  };
})

.controller('OtherController', function($scope, Data) {
  var callback = function(data) {
    $scope.data = data;
  };

  Data.register(callback);

  $scope.$on('$destroy', function() {
    Data.unregister(callback);
  }); 
})

.factory('Data', function($http) {
  var callbacks = [];

  return {
    register: function(callback) {
      var index = callbacks.indexOf(callback);
      if (index === -1) {
        callbacks.push(callback);
      }
    },
    unregister: function(callback) {
      var index = callbacks.indexOf(callback);
      if (index !== -1) {
        callbacks.splice(index, 1);
      }
    },
    getData: function() {
      /* where data.json is { "message": "My message" } */
      return $http.get('data.json').then(function(response) {
        var data = response.data;
        data.timestamp = (new Date()).getTime();
        /* move inside $interval out of this fn maybe... */
        angular.forEach(callbacks, function(callback) {
          callback(data);
        });
        return data;
      });
    }
  };
});

等待同级控制器的功能

1 个答案: