Accès à $ URL d'instance de ressources en angularjs

Question

J'ai créé une instance de ressource avec ce code:

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

Voici le code de service:

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

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

Book a une image de couverture, accessible par URL: /books/herbookid/cover.png

Comment puis-je obtenir l'URL de l'instance de ressources?

$scope.book.$$url 

est indéfini.

Answer 1

Je pense que c'est une préoccupation de vue et devrait être traitée là-bas. Je ne peux pas tester cela maintenant, mais mon hunch serait de construire l'URL dans votre modèle de vue.

Donc, le modèle de détail du livre serait:

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

Vous devrez peut-être jouer avec le chemin relatif, mais cela devrait faire l'affaire. Vous souhaitez conserver ces préoccupations de votre contrôleur et vos services, et Angular est livré avec de nombreux outils, comme le Directive de la NGSRC , de faire cela.

Modifier

Peut-être pour mieux répondre à la question initiale, voici une autre solution. Utilisez le motif de décorateur sur étendre l'API de service $ de ressources pour exposer l'URL en tant que propriété d'un objet de ressource.

Décorez le service $ de ressources comme celui-ci:

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

}]);

Ensuite, vous aurez l'URL disponible en tant que propriété sur votre objet de ressource.

$scope.book.$url

Notez qu'il y a toute une emballage de plusieurs scénarios de ressources que cet exemple simple ne supporte pas, mais cela montre une preuve de concept.

voir Ce Plunker.