flickrのタグやコメントをクリックして画像を表示するAngularJS

Question

Flickrの最近の写真をオプションで一覧表示するには、画像をクリックするとその画像にタグやコメントが表示されます。

(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.module.js：

私はこの作りました

(function() { 
'use strict'; 

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

flickrController.$inject = ['flickrImgs', '$location', '$http']; 

function flickrController(flickrImgs, $location, $http) { 

    var fc = this; 

    fc.showImg = function (id) { 
     $location.path("/photos/" + id); 
     console.log(id); 
    }; 

    flickrImgs.getPhotos().then(function() { 
     fc.photos = flickrImgs.photos; 
    }); 

} 

})(); 

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: { 
       'content@': { 
        templateUrl: 'app/components/core/home.html', 
        controller: 'flickrController', 
        controllerAs: 'fc' 
       } 
      } 
     }) 
     .state('main.singleImg', { 
      url: '/photos/:id', 
      views: { 
       'content@': { 
        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> 

単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> 

Iをクリアホームページに表示されているイメージ上で、そのイメージを単一のimg.htmlテンプレートに渡して、私はURLにイメージIDを取得しますが、htmlに渡す方法はわかりません。

ご協力いただければ幸いです。

Answer 1

あなたは//更新flickrImgsファクトリメソッド

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

//新しいコントローラを備えた単一の画像状態

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

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> 

をUI-SREFに含まれていません//新しいコントローラ

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

//新しいシングル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> 

この情報がお役に立てば幸いです。