Question

我在AngularJS中构建了一个可运行的单页面应用程序，我在其中搜索第三方API。

用户进行搜索查询并点击其中一个显示的结果。我尝试做的是用dinamically创建路由，因此当用户从搜索结果数组中选择resultA时，URL会更改为app /＃/ resultA。

此解决方案肯定会提高可用性，因为用户可以前后搜索（app /＃/ resultB返回app /＃/ resultA）。

这是我的服务代码：

angular.module('myApp', ['chieffancypants.loadingBar', 'ngResource', 'ui.bootstrap', 'truncate', 'infinite-scroll'/*, 'QuickList'*/])


  function Ctrl($scope, $http) {

     $scope.$watch('name', function (name){
      if (!name || name.length == 0)
        return 0;
      setTimeout(function() {
        if (name === $scope.name){
          $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=7', {ignoreLoadingBar: true}).
          success(function(data3) {
            $scope.clicked = false;
            $scope.results = data3.results;
          });
        }
      }, 300);
    });

    $scope.reset = function () {
      $scope.sliding = false;
      $scope.name = undefined;
      $scope.album = undefined;
      $scope.year = undefined;
    }

    $scope.$watch(function() {
        return $scope.artist;
      }, function() {
        if($scope.artist){
          var pos = $scope.artist.name.toLowerCase().indexOf(', the');
          if (pos != -1) {
            $scope.artist.name = 'The ' + $scope.artist.name.slice(0, pos);
          }
        }
      });
    $scope.getTooltipPlacement = function () {
        return ($(window).width() < 768) ? 'top' : 'left';
    };  
    $scope.getDetails = function (id) {
      $http.get('http://api.discogs.com/artists/' + id).
        success(function(data) {
            $scope.artist = data;
            $scope.nextPage = 1;
            $scope.morePages = true;
            $scope.loading = false;
            $scope.releases = [];
            $scope.loadDetails();
            $scope.clicked = true;
            $scope.sliding = true;
        });
    }

    $scope.loadDetails = function(/*quickRepeatList*/) {
          if($scope.morePages && !$scope.loading){
            $scope.loading = true;
            $http.get('http://api.discogs.com/artists/' + $scope.artist.id + '/releases?page=' + $scope.nextPage + '&per_page=8').then(function(data2) {
                $scope.nextPage = $scope.nextPage + 1;
                if($scope.nextPage > data2.data.pagination.pages){
                  $scope.morePages = false;
                }
                $scope.releases = $scope.releases.concat(data2.data.releases);
            }).finally(function(){
              $scope.loading = false;
            });
          }
      };  


  }
    function ImageCtrl($scope, $http) {
          $scope.image = 'img/record-default.png'; 
          $http.get('http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key=e8aefa857fc74255570c1ee62b01cdba&artist=' + $scope.artist.name + '&album=' + $scope.release.title + '&format=json', {ignoreLoadingBar: true}).
            success(function (data4) {
              $scope.image = data4.album.image[2]['#text'];
            }
          )

    }

接收此结果名称的特定函数如下，其中$ scope.artist将是在app /＃/之后添加的字符串：

$scope.getDetails = function (id) {
    $http.get('http://api.discogs.com/artists/' + id).
      success(function(data) {
          $scope.artist = data;
          $scope.nextPage = 1;
          $scope.morePages = true;
          $scope.loading = false;
          $scope.releases = [];
          $scope.loadDetails();
          $scope.clicked = true;
          $scope.sliding = true;
      });
  }

和working plunker。

在尝试使用动态数据操作路线时，您能指出正确的方向吗？

使用AngularJS中的JSON数据填充路径

0 个答案: