Angular JS /文章没有定义(Angular JS / articles is not defined)

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