Ожидание функции от родного контроллера - PullRequest
Новая
       3

Ожидание функции от родного контроллера

0 голосов
/ 01 мая 2019

Я использую 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 будет запущен?

1 Ответ

0 голосов
/ 02 мая 2019

Вы можете использовать $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);

Или вы можете внедрить простой механизм регистрации и отмены регистрации обратных вызовов в вашем сервисе, чтобы получать уведомления при каждом изменении данных, например,

Template 

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

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...