在AngularJS中访问$资源实例URL

Question

我使用此代码创建了资源实例：

$scope.book = Book.get({bookId:1});

.

这里是服务代码：

var bookServices=angular.module('bookServices',['ngResource']);

bookServices.factory('Book',['$resource',
    function($resource){
        return $resource('/books/:bookId',{},{});
    }]);

.

书有封面图像，可通过URL访问： /books/:bookid/cover.png

如何从资源实例获取URL？

$scope.book.$$url 

.

未定义。

Answer 1

我认为这是一个关注的问题，应该在那里处理。我现在无法测试，但我的亨希将是在您的视图模板中构建URL。

所以，书籍详情模板将是：

<div>
     <p>Name: {{ book.name }}</p>         
     <img ng-src="/books/{{ book.id }}/cover.png" alt="cover">
</div>

.

您可能需要使用相对路径，但这应该做诀窍。您希望将这些问题保留出来的控制器和服务，并且角度附带大量工具，如 ngsrc指令，做到这一点。

编辑

也许要更好地回答原始问题，这是另一种解决方案。使用装饰器模式到扩展 $资源服务API，将URL作为资源对象的属性公开。

为如下装饰$资源服务：

function ResourceDecorator($delegate) {

  var decorator = function (url, paramDefaults, actions) {

    var resource = $delegate(url, paramDefaults, actions),
        getSave;

    // expose the parameterized url of the resource
    resource.$url = url;

    // expose urls for individual resources by extending
    // the get method to return a class object that has
    // a url property

    getSave = resource.get;

    resource.get = function(parameters, success, error) {

      var r = getSave(parameters, success, error),
              paramName;

      // get the name of the parameter, assuming just ONE            
      paramName = Object.keys(parameters)[0];

      // replace the parameter with it's value
      r.$url = url.replace(':' + paramName, parameters[paramName]);

      // return the decorated class object back
      return r;
    };

    return resource;

  };

  return decorator;

}

app.config(['$provide', function ($provide) {

    $provide.decorator('$resource', ['$delegate', ResourceDecorator]);

}]);

.

然后您将拥有资源对象上的属性的URL。

$scope.book.$url

.

请注意，此简单示例的全部WACK为$资源方案不支持，但它显示了概念证明。

看这个 plunker。