Accesso all'URL di istanza di risorse $ ANGULARJS

Question

Ho creato un'istanza delle risorse con questo codice:

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

.

Ecco il codice di servizio:

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

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

.

Il libro ha un'immagine di copertura, accessibile tramite URL: /Books/:Bookid/cover.png

Come posso ottenere URL dall'istanza delle risorse?

$scope.book.$$url 

.

non è definito.

Answer 1

Penso che questa sia una preoccupazione di vista e dovrebbe essere gestita lì. Non posso testarlo ora, ma il mio hunch sarebbe quello di costruire l'URL nel modello di visualizzazione.

Allora, il modello di dettaglio del libro sarebbe:

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

.

Potrebbe essere necessario giocare con il percorso relativo, ma ciò dovrebbe fare il trucco. Vuoi mantenere queste preoccupazioni fuori dal tuo controller e servizi, e Angular ha un sacco di strumenti, come il Direttiva NGSRC , per fare proprio questo.

Modifica

Forse per rispondere meglio alla domanda originale, ecco un'altra soluzione. Utilizzare il motivo del decoratore su extend l'API del servizio $ risorse per esporre l'URL come proprietà di un oggetto risorsa.

Decora il servizio $ risorse come questo:

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

}]);

.

Allora avrai l'URL disponibile come proprietà sul tuo oggetto di risorsa.

$scope.book.$url

.

Nota che c'è un intero wack di dollari scenari di risorse che questo semplice esempio non supporta, ma mostra una prova del concetto.

Vedi Questo plunker.