Javascript 通过post id重定向到另一个视图，不起作用

我从WordPress接收到一个外部对象，在一个视图中我有

post.title

，如果您单击该标题，您可以转到另一个视图并查看整个

post.content

到目前为止，我无法看到整个帖子，因为我得到了一些错误，帖子是未定义的

我做了一个，让你更容易理解。如果您使用JSBin会更好，因为您可以使用集成在那里的控制台。你所要做的就是点击文章的标题，你会意识到不能转到另一个视图

这是关于我的问题的代码，这与我在上面发布的在线编辑器中看到的代码相同

.state('tabs', {
  url: "/tabs",
  abstract: true,
  templateUrl: "tabs.html"
})
.state('tabs.news', {
  url: "/news",
  views: {
    'tab-news': {
      templateUrl: "tab-news.html",
      controller: 'NewsCtrl'
    }
  }
})
.state('tabs.post-detail', {
  url: '/news/:postId',
  views: {
    'tab-news': {
      templateUrl: 'tab-post-detail.html',
      controller: 'PostDetailCtrl'
    }
  }
})

主视图新闻的html

<a ng-href="#/tabs/news/{{post.ID}}">
   <h2 ng-bind-html="post.title"></h2>
   <p>{{post.date | date}}</p>
</a>

这是服务

angular.module('urbanet.app.service', [])

.service('FreshlyPressed', function($http) {
  return {
    getBlogs: function($scope) {
      $scope.posts = [];
      $http.jsonp('https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK')
        .success(function(result) {
          $scope.posts = result.posts;
        });
    },

    get: function(postId, $scope) {
      console.log(postId);
      console.log($scope.posts);
      for (var i = 0; i < $scope.posts.length; i++) {
        if ($scope.posts[i].id === parseInt(postId)) {
          return $scope.posts[i];
        }
      }
      return null;
    }
  }
})

这是一个问题。您正在尝试将整个$scope对象作为参数传递

你到底想把什么传递给get电话

你有这个：

get: function(postId, $scope) {  //<- that shouldn't be $scope, make it 'post' or something
      console.log(postId);
      console.log($scope.posts); //Notice that this comes back undefined?
      for (var i = 0; i < $scope.posts.length; i++) { //<- length throws an error because there isn't anything there.
        if ($scope.posts[i].id === parseInt(postId)) {
          return $scope.posts[i];
        }
      }
      return null;
    }

---

get:function（postId，$scope）{/您将不得不对各个帖子发出新的请求

新按下的
api将向您返回
siteID
和
postId
。
然后，将这些内容组合使用
posts
API来获得单个post

由于新按下的
是一个不断变化的列表，因此这是你唯一能够为帖子添加书签的方法。明天你可能无法获得相同的主帖子集，因此无法复制今天使用的链接

服务方式：

getPostById: function(siteId,postId ) {
  var url ='https://public-api.wordpress.com/rest/v1.1/sites/'+siteId+'/posts/'+postId+'?callback=JSON_CALLBACK'
  return $http.jsonp(url)
}

控制器

.controller('PostDetailCtrl', function($scope, $stateParams, FreshlyPressed) {
  var postId = $stateParams.postId,
      siteId = $stateParams.siteId;

 FreshlyPressed.getPostById(siteId,postId).success(function(response){        
    $scope.post = response
  })
});

相应地修改链接

<a ng-href="#/tabs/news/{{post.site_ID}}/{{post.ID}}">

如前所述，当前方法（将
$scope
作为参数传递给服务）不起作用。tpie建议的另一种替代方法（在服务中缓存
帖子
数据）可能是使用
解析
并承诺：

服务代码

.service('FreshlyPressed', function($q, $http) {
  return {
    getBlogs: function() {
      var deferred = $q.defer();
      $http.jsonp('https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK')
        .success(function(result) {
          deferred.resolve(result.posts);
        });
      return deferred.promise;
    },

    get: function (postId, posts) { 
      /* snipped, this wasn't the problematic part */ 
    }
  }
})

这不会在您的服务中缓存
帖子
结果，如果您正在进行的
$http
调用很重，这可能是一个缺点，但是使用承诺是设置异步请求的一种很好的方法

然后对应的状态配置

.state('tabs', {
  url: "/tabs",
  abstract: true,
  templateUrl: "tabs.html"
})
.state('tabs.news', {
  url: "/news",
  views: {
    'tab-news': {
      templateUrl: "tab-news.html",
      controller: 'NewsCtrl'
    }
  },
  resolve: {
    posts: function (FreshlyPressed) {
      return FreshlyPressed.getBlogs();
    }
  }
})
.state('tabs.post-detail', {
  url: '/news/:postId',
  views: {
    'tab-news': {
      templateUrl: 'tab-post-detail.html',
      controller: 'PostDetailCtrl'
    }
  },
  resolve: {
    posts: function (FreshlyPressed) {
      return FreshlyPressed.getBlogs();
    }
  }
})

这将调用服务中的
getBlogs
函数，并等待承诺得到解决。然后，您可以将已解决的
posts
变量注入控制器：

最后，控制器

.controller('NewsCtrl', function($scope, $ionicLoading, FreshlyPressed, posts) {
  $scope.posts = posts;
  $scope.doRefresh = function() {
    FreshlyPressed.getBlogs()
      .then(function (posts) {
        $scope.posts = posts;
      });
  }
});

在这里，我们可以直接使用已解析的
posts
变量设置
$scope.posts
变量。然后需要修改
doRefresh
函数，以便它调用服务函数，并在解析承诺后，相应地设置
$scope.posts
数据

.controller('PostDetailCtrl', function($scope, $stateParams, FreshlyPressed, posts) {
  $scope.post = FreshlyPressed.get($stateParams.postId, posts);
});

在这里，我们给服务
get
函数指定resolved
posts
变量作为参数，因为在这种情况下，服务不会缓存该数据

这不是一个无问题的方法，例如考虑下面的场景：你把一组<代码>帖子>代码>数据输入到你的主控制器中。然后，在你的用户点击标题之前，有新的帖子发布到你正在查询的WordPress中。这可能导致<代码> PosiDeLyCtrl 接收一组新的<代码>帖子< /代码> DAT。a、 不再包含用户单击的特定帖子
无论如何，我认为这是一个可行的选择，至少有点值得思考。
事实上我很困惑。我已经用了2个小时，仍然可以得到逻辑。控制器作用域是一个新实例，没有
$scope.posts
，所以
get（）
在服务中不起作用，因为它现在仍然收到相同的错误，并且posts或$scope.posts仍然没有定义。应该返回到您的服务中，去掉传递的作用域，并对getBlogs（）使用相同的方法我真的需要学习更多关于角度的知识。当我的老板和我在一起时也会发生同样的情况，我对每一件事只有一个解决方案，但他对同一个问题有大约4种不同的解决方案。有时我觉得自己很愚蠢。再次感谢你不仅仅是角度的问题，而是你想知道如何获取数据。我从来没有见过那个API…不得不到处看看为了更好地理解新发布的
是什么，我一开始以为它只是一个博客，但也要注意…你不需要
jsonp
…我确认了使用json的api可以很好地工作…这样可以更好地处理错误。但问题是，用户永远不能用这种方式将url标记为全文，因为主提要会改变，并且它依赖于那个pos不要一直在主提要中。使用永久链接到帖子，虽然这永远不会改变，但这是非常理想的。是的，这是真的-直到我读了你的答案才意识到这一点，因为当你发布你的答案时，我正在写我自己的答案，而我自己根本没有看一眼刚刚按下的
。
.service('FreshlyPressed', function($q, $http) {
  return {
    getBlogs: function() {
      var deferred = $q.defer();
      $http.jsonp('https://public-api.wordpress.com/rest/v1.1/freshly-pressed?callback=JSON_CALLBACK')
        .success(function(result) {
          deferred.resolve(result.posts);
        });
      return deferred.promise;
    },

    get: function (postId, posts) { 
      /* snipped, this wasn't the problematic part */ 
    }
  }
})

.state('tabs', {
  url: "/tabs",
  abstract: true,
  templateUrl: "tabs.html"
})
.state('tabs.news', {
  url: "/news",
  views: {
    'tab-news': {
      templateUrl: "tab-news.html",
      controller: 'NewsCtrl'
    }
  },
  resolve: {
    posts: function (FreshlyPressed) {
      return FreshlyPressed.getBlogs();
    }
  }
})
.state('tabs.post-detail', {
  url: '/news/:postId',
  views: {
    'tab-news': {
      templateUrl: 'tab-post-detail.html',
      controller: 'PostDetailCtrl'
    }
  },
  resolve: {
    posts: function (FreshlyPressed) {
      return FreshlyPressed.getBlogs();
    }
  }
})

.controller('NewsCtrl', function($scope, $ionicLoading, FreshlyPressed, posts) {
  $scope.posts = posts;
  $scope.doRefresh = function() {
    FreshlyPressed.getBlogs()
      .then(function (posts) {
        $scope.posts = posts;
      });
  }
});

.controller('PostDetailCtrl', function($scope, $stateParams, FreshlyPressed, posts) {
  $scope.post = FreshlyPressed.get($stateParams.postId, posts);
});