Question

我是Javascript和Angular的初学者，我试图在我的网站上实现AngularJS。我在CodeSchool，Egghead等观看教程。但我一开始就是筹码。

从我的服务器获取JSON数据并将其显示在我的网站上。这是我的代码;

JS：

angular.module('nasuh',[])
.factory('MY', function($http){
     return  {
          isimler: function() {
          var alHemen;
          var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
          $http.get(url).success(function(data) {
          alHemen = data;
          });
          return alHemen;
        }
      };
    })
.controller('nbgCtrl', function($scope, $http, MY) {
         $scope.mangas = MY.isimler();  
     })

HTML：

<html ng-app = "nasuh">
<body ng-controller = "nbgCtrl">
<div class="col s12 m6 l4" ng-repeat = "manga in mangas"> -----> Want to repeat
        <div class="row">
        <div class="col s5">
            <a href="#" class="thumbnail">
            <img src="/kapaklar/{{manga.kapak}}">
            </a>
        </div>
        <div class="col s7">
           <p>{{manga.ad}}</p>

           <a href="" class="waves-effect waves-light btn"></a>

</div>
</div>
</div>

JSON：

 [{"id":"1","ad":"Naruto","yazar":"Masashi KISHIMOTO","kapak":"naruto.jpg"},
 {"id":"2","ad":"One Piece","yazar":"Eiichiro ODA","kapak":"one_piece.jpg"}]

编辑-1：谢谢大家的回复，但我想我需要在控制器上调用数据，如

  .factory('MY',
  return {
  isimler: function() {

.................................

$scope.mangas=isimler();

因为我需要多次使用这些数据并在ui-router扩展名中使用它。

$stateProvider
.state('icerik', {
  url: "/icerik",
  templateUrl: "icerik.html"
   controller: $scope.mangas = isimler();
})

Answer 1

我会这样做你的工厂：

angular.module('nasuh',[])
.factory('MY', function($http){
     var factory = {};
     var url = '/uzak/remote.php?callback=JSON_CALLBACK';
     //I return the $http promise directly when you use MY.isimler
     factory.isimler = $http.get(url);
     return factory;
    })
.controller('nbgCtrl', function($scope, MY) {
         //I handle here the success of the $http call
         MY.isimler.success(function(alHemen){
              $scope.mangas = alHemen;
         });  
     })

您的错误：

你不能这样做

      $http.get(url).success(function(data) {
          alHemen = data;
      });
      return alHemen;

$http.get()是异步调用。这意味着您的成功函数的内容将在稍后执行而不会停止JS执行。您的return alHemen最终会在alHemen = data

之前调用

以我的拙见，处理电话是控制人的责任。工厂只公开了进行调用的方法。我更喜欢直接返回承诺，让控制器完成处理它的工作。

修改

使用ui路由器，您可以在解析部分使用promise将其导入控制器。

$stateProvider .state('icerik', { url: "/icerik", templateUrl: "icerik.html", controller: "nbgCtrl", resolve: { isimler : function(MY){ return MY.isimler; } } })

你可以像这样进入你的控制器（只需注入它）：

.controller('nbgCtrl', function($scope, isimler) { $scope.mangas = isimler; })

以下是关于解决方案的一些documentation。

Answer 2

问题是http调用是异步的。

angular.module('nasuh',[])

    .factory('MY', function($http){
         return  {
              isimler: function() {
              var alHemen;
              var url = 'http://localhost/uzak/remote.php?callback=JSON_CALLBACK';
              $http.get(url).success(function(data) {
              alHemen = data;
              });
              return alHemen; // this line run before you get response.
            }
          };
        })

Angularjs有不同的处理方法。你需要从工厂回复承诺。例如 -

 .factory('MY', function($http,$q){
           var myFactory;
             myFactory.getJson= function(){
                var promise = $http
                .get('URLURLURL')
                .then(function (response) {
                    return response.data;
                },function (response) {
                    return $q.reject(response);
                });
            return promise;
    };
    return myFactory;
            });

在控制器中使用它。像这样使用

.controller('nbgCtrl', function($scope, MY) {
MY.getJson().then(function(data){
                      $scope.mangas = data;
                    });

     });

AngularJS，使用Ng-Repeat和Ng-Factory显示Json数据

2 个答案:

修改