2016-06-25 15 views
0

Ich habe eine App für die neuesten Fotos von Flickr mit Option machen, wenn Sie auf ein Bild klicken, um das Bild mit Tags und Kommentare anzuzeigen, die es enthält.Angeklickte Bild von Flickr mit Tags und Kommentare anzeigen AngularJS

Ich habe das gemacht:

core.module.js

(function() { 
'use strict'; 

angular.module('flickrApp.core', ['ui.router', 'ngResource']); 

})(); 

core.factory.js

(function() { 
'use strict'; 

angular 
    .module('flickrApp.core') 
    .factory('flickrImgs', flickrImgs); 

flickrImgs.$inject = ['$http']; 

function flickrImgs($http) { 

    var url = 'https://api.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=415028ef16a31ed8f70f9dc3e90964d1&extras=url_q,url_o,tags&format=json&nojsoncallback=1'; 

    var photos; 

    var factory = { 
     getPhotos: getPhotos 
    }; 

    return factory; 

    function getPhotos() { 
     return $http.get(url).then(function (response) { 
      factory.photos = response.data.photos.photo; 
     }); 
    } 
}; 
})(); 

core.controller.js

core.router.js

(function() { 
'use strict'; 

angular 
    .module('flickrApp.core') 
    .config(config); 

config.$inject = ['$stateProvider', '$urlRouterProvider']; 

function config($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/home'); 

    $stateProvider 
     .state('main', { 
      abstract: true, 
      views: { 
       'header': { 
        templateUrl: 'app/components/core/header.html' 
       } 
      } 
     }) 
     .state('main.home', { 
      url: '/home', 
      views: { 
       '[email protected]': { 
        templateUrl: 'app/components/core/home.html', 
        controller: 'flickrController', 
        controllerAs: 'fc' 
       } 
      } 
     }) 
     .state('main.singleImg', { 
      url: '/photos/:id', 
      views: { 
       '[email protected]': { 
        templateUrl: 'app/components/core/single-img.html', 
        controller: 'flickrController', 
        controllerAs: 'fc' 
       } 
      } 
     }); 

    newPhoto.$inject = ['$stateParams', 'flickrImgs']; 

    function newPhoto($stateParams, flickrImgs) { 
     return flickrImgs.get({ 
      id: $stateParams.id 
     }).$promise; 
    } 

} 

})(); 

home.html

<div class="row col-sm-12 col-md-10 col-md-offset-1"> 
<div ng-repeat="photo in fc.photos | limitTo:16" class="col-sm-12 col-md-3"> 
    <a href ng-click="fc.showImg(photo.id)"> 
     <img class="thumbnail" ng-src="{{photo.url_q}}" width="100%"> 
    </a> 
</div> 
</div> 

Einzel img.html

<div class="row col-sm-12 col-md-10 col-md-offset-1"> 
<div ng-repeat="photo in fc.photos | filter : {id: photo.id} | limitTo: 1" class="col-sm-12 col-md-10 col-md-offset-1"> 
    <a href ng-click="fc.showImg(photo.id)"> 
     <img class="thumbnail" ng-src="{{photo.url_o}}" width="100%"> 
    </a> 
    <div>Tags: 
     <button class="btn-primary"> 
      {{photo.tags}} 
     </button> 
    </div> 
    <div>Comments: 
     <div> 
      {{photo.comments}} 
     </div> 
    </div> 
</div> 
</div> 

Als ich cl ick auf Bild auf der Startseite aufgelistet, ich möchte dieses Bild zu Single-img.html Vorlage übergeben und ich bekomme Bild-ID in URL, aber ich weiß nicht, wie es an HTML übergeben.

Jede Hilfe wäre willkommen.

Antwort

0

Sie fehlen ui-SREF in in home.html

<div class="row col-sm-12 col-md-10 col-md-offset-1"> 
<div ng-repeat="photo in fc.photos | limitTo:16" class="col-sm-12 col-md-3"> 
    <a ui-sref="main.singleImg({id: photo.id})"> 
     <img class="thumbnail" ng-src="{{photo.url_q}}" width="100%"> 
    </a> 
</div> 
</div> 

// Aktualisiert flickrImgs Factory-Methode

function getPhotos() { 
    var deferred = $q.defer(); 

    if (factory.photos) { 
     deferred.resolve(factory.photos); 
    } else { 
     $http.get(url).then(function(response) { 
      factory.photos = response.data.photos.photo; 

      deferred.resolve(factory.photos); 
     }); 
    } 

    return deferred.promise; 
} 

// Einzelbild Zustand mit neuen Controller

.state('main.singleImg', { 
    url: '/photos/:id', 
    views: { 
     '[email protected]': { 
      templateUrl: 'app/components/core/single-img.html', 
      controller: 'singleImgController', 
      controllerAs: 'sic' 
     } 
    } 
}); 

// Neuer Controller

angular 
    .module('flickrApp.core') 
    .controller('singleImgController', singleImgController); 

singleImgController.$inject = ['$stateParams', 'flickrImgs']; 

function singleImgController($stateParams, flickrImgs) { 
    var vm = this; 

    flickrImgs.getPhotos() 
    .then(function(photos) { 
     angular.forEach(photos, function(photo) { 
      if(photo.id == $stateParams.id) { 
       vm.photo = photo; 
      } 
     }) 
    }); 
} 

// Neue Single-img.html

<div class="row col-sm-12 col-md-8 col-md-offset-2"> 
<img class="thumbnail" ng-src="{{sic.photo.url_o}}" width="100%"> 
<div>Tags: 
    <div class="btn-primary"> 
     {{sic.photo.tags}} 
    </div> 
</div> 
<div>Comments: 
    <div> 
     {{sic.photo.comments}} 
    </div> 
</div> 
</div> 

Hoffnung, das hilft.

+0

Ja, ich vergaß ui-sref, danke dafür. Aber, immer noch in single-img.html, bekomme ich nicht das richtige Bild. – user2063123

+0

Muthukannan Kanniappan Ja, das hilft, ich bekomme die ID des Fotos, aber kann ich den URL-Parameter übergeben, damit ich ihn im IMG-Tag verwenden kann? Ich bin etwas verwirrt, sorry für so viele Fragen. – user2063123

+0

Das meiste davon ist aktualisiert :-) Ich würde vorschlagen, dass Sie mehr über $ q und UI-Router lesen. –