Question

我在同一视图中组合了多个指令，所有指令都访问相同的Angular $ resource。指令之一包含一种形式。

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

查看codepen的示例。另请参见以下代码：

is_sorted

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

我希望输入框中的任何更改都会在两个视图中更新（$ 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返回相同的实例？

1 个答案: