Как я могу сделать ресурс AngularJS $ для возврата одного и того же экземпляра при обращении с нескольких контроллеров? - PullRequest
Новая
       36

Как я могу сделать ресурс AngularJS $ для возврата одного и того же экземпляра при обращении с нескольких контроллеров?

0 голосов
/ 15 июня 2019

У меня несколько директив, объединенных в одном представлении, и все они имеют доступ к одному и тому же ресурсу Angular $.Одна из директив содержит форму.

Я бы ожидал, что $ resource вернет синглтон, поэтому любое изменение данных будет автоматически отражаться во всех других директивах, но это не так.

См. codepen с примером.См. Также код ниже: 

angular
  .module("app", ["ngResource"])
  .controller("c1", function($scope, res) {
    $scope.response = res.get();
  })
  .controller("c2", function($scope, res) {
    $scope.response = res.get();
  })
  .service("res", function($resource) {
    const url = "https://httpbin.org/delay/1";
    return $resource(url, {
      get: { method: "GET" },
      save: { method: "POST" }
    });
  });

<div ng-app="app">
  <div ng-controller="c1">
    c1: {{response.origin}}
  </div>
  <div ng-controller="c2">
    c2: {{response.origin}}<br>
    <input width="200" ng-model="response.origin" style="width: 300px;" /><br>
  </div>
</div>

Я ожидаю, что любые изменения в поле ввода будут обновлены в обоих представлениях ($ scope.response должен указывать на один и тот же объект), но только одинпод одной изолированной областью видоизменения.

Есть ли способ совместно использовать один и тот же объект $ resource среди представлений?

1 Ответ

0 голосов
/ 17 июня 2019

Один из способов сделать это - сохранить ресурс $ внутри службы и обращаться к нему только через методы сервиса. См. https://codepen.io/miki/pen/xoVoap. Вы должны быть осторожны с этим подходом, так как синглтон будет обновляться с параметрами, передаваемыми при каждом вызове. Так что это хорошо работает для случаев, когда ресурс уникален. 

angular
  .module("app", ["ngResource"])
  .controller("c1", function($scope, srv) {
    $scope.srv = srv;
    $scope.srv.get("https://httpbin.org/delay/1");
  })
  .controller("c2", function($scope, srv) {
    $scope.srv = srv;
    $scope.srv.get("https://httpbin.org/delay/1");
  })
  .service("srv", function($resource) {
    let service = {};
    service.get = url => {
      service.$resource = $resource(url, {
        get: { method: "GET" },
        save: { method: "POST" }
      });
      service.resource = service.$resource.get();
    };
    return service;
  });

HTML: 


<div ng-app="app">
  <div ng-controller="c1">
    c1: {{srv.resource.origin}}
  </div>
  <div ng-controller="c2">
    c2: {{srv.resource.origin}}<br>
    <input width="200" ng-model="srv.resource.origin" style="width: 300px;" /><br>
  </div>
</div>
...