当从多个控制器引用时，如何使 AngularJS $resource 到 return 相同的实例？

Question

我在同一视图中组合了多个指令，所有指令都访问相同的 Angular $资源。其中一个指令包含一个表单。

我希望 $resource 到 return 一个单例，这样数据的任何更改都会自动反映在所有其他指令中，但事实并非如此。

参见 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 对象？

Answer 1

一种方法是将 $resource 保留在服务中，并且只能通过服务方法访问它。参见 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>

当从多个控制器引用时，如何使 AngularJS $resource 到 return 相同的实例？

How can I make an AngularJS $resource to return the same instance when referenced from multiple controllers?

angularjs

angular-resource

angularjs-service