Angular JS /文章没有定义(Angular JS / articles is not defined)
我在Angular App中的services.js中有这个代码:
.factory('Articles', function($http) { $http.get('https://api.myjson.com/bins/4ici6').then( function(response) { var articles = response.data.articles; }); return { all: function() { return articles; }, get: function(articleId) { for (var i = 0; i < articles.length; i++) { if (articles[i].id === parseInt(articleId)) { return articles[i]; } } return null; } }; })它不起作用,因为我在控制台中收到此错误:
ReferenceError: articles is not defined at Object.all (http://localhost:8100/js/services.js:31:14) at new <anonymous> (http://localhost:8100/js/controllers.js:4:30) at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18015:14)另外这里是引用articles的controller.js代码:
.controller('NewsCtrl', function($scope, Articles) { $scope.articles = Articles.all(); }) .controller('NewsDetailCtrl', function($scope, $stateParams, Articles) { $scope.article = Articles.get($stateParams.articleId); $scope.posttofacebook = function (){ window.plugins.socialsharing.shareViaFacebook(null, null, $scope.article.url); } $scope.posttotwitter = function (){ window.plugins.socialsharing.shareViaTwitter(null, null, $scope.article.url); } })我在这做错了什么?
I have this code in services.js in in my Angular App:
.factory('Articles', function($http) { $http.get('https://api.myjson.com/bins/4ici6').then( function(response) { var articles = response.data.articles; }); return { all: function() { return articles; }, get: function(articleId) { for (var i = 0; i < articles.length; i++) { if (articles[i].id === parseInt(articleId)) { return articles[i]; } } return null; } }; })It doesn't work as I get this error in the console:
ReferenceError: articles is not defined at Object.all (http://localhost:8100/js/services.js:31:14) at new <anonymous> (http://localhost:8100/js/controllers.js:4:30) at Object.instantiate (http://localhost:8100/lib/ionic/js/ionic.bundle.js:18015:14)Also here is the controller.js code that refers to articles:
.controller('NewsCtrl', function($scope, Articles) { $scope.articles = Articles.all(); }) .controller('NewsDetailCtrl', function($scope, $stateParams, Articles) { $scope.article = Articles.get($stateParams.articleId); $scope.posttofacebook = function (){ window.plugins.socialsharing.shareViaFacebook(null, null, $scope.article.url); } $scope.posttotwitter = function (){ window.plugins.socialsharing.shareViaTwitter(null, null, $scope.article.url); } })What am I doing wrong here?
最满意答案
因为$http.get是异步调用,所以你必须处理它。
只是将它置于工厂之上将无法始终如一地工作。
试试这个:
.factory('Articles', function($http) { return { all: function() { return $http.get('https://api.myjson.com/bins/4ici6').then(function(response) { return response.data.articles; }); }, get: function(articleId) { //Probably best here to call an API endpoint that will return a single article with the parameter's articleId //Something along the lines of //$http.get('https://api.myjson.com/bins/4ic16/' + articleId).then(function(response) { //handle response}); } }; })您的控制器也应该更改为处理异步函数调用:
.controller('NewsCtrl', function($scope, Articles) { Articles.all().then(function(articles) { $scope.articles = articles }); })Because $http.get is an asynchronous call you'll have to deal with that.
Just putting it on top of your factory won't consistently work.
Try this instead:
.factory('Articles', function($http) { return { all: function() { return $http.get('https://api.myjson.com/bins/4ici6').then(function(response) { return response.data.articles; }); }, get: function(articleId) { //Probably best here to call an API endpoint that will return a single article with the parameter's articleId //Something along the lines of //$http.get('https://api.myjson.com/bins/4ic16/' + articleId).then(function(response) { //handle response}); } }; })Your controller should also be changed to handle the async function call:
.controller('NewsCtrl', function($scope, Articles) { Articles.all().then(function(articles) { $scope.articles = articles }); })更多推荐
发布评论