Задайте значение в угловом формате с помощью jQuery ajax

Question

Я хочу создать динамическую страницу (именно поэтому я использую angular.js) в соответствии с данными из моей базы данных localhost. Я подключение к моей БД с помощью JQuery функции Ajax вызова:

var ajaxCall = function(request,datas,async,onSuccess){ 
    $.ajax({ 
     async: async, 
     url: 'data.php', 
     type: "POST", 
     data: { 
      request: request, 
      datas: datas 
     }, 
     dataType:"json", 
     success:function(returns){ 
      if(onSuccess != null) 
       onSuccess(returns); 
     } 
    }); 
}; 

Это мой угловой файл, в то числе ajaxCall получить мои значения:

(function(){ 
    var app = angular.module('user', [ ]); 

    app.controller('MemberController', function() { 
     var user= this; 
     user.members= []; 

     ajaxCall("getMember",null,false,function(result){ 
      for(var number in result) 
       user.members.push(result[number]); 
     }); 

     setTimeout(function(){ 
      console.log(user.members) 
     }, 2500); 
    }); 
})(); 

От вызова Ajax, я получить JSON (действительный на JSONLint), но в моем угловом коде, когда я console.log(user.members) (даже с TimeOut в несколько секунд), значение массива по-прежнему [], и я не могу использовать его на моей странице html.

У вас есть идеи, почему? Или как я могу изменить свой код, чтобы он работал? Спасибо !

Answer 1

enter link description here Внутри вашего AJAX обратного вызова вы должны сказать Угловое, что вы изменили это модель , вне Углового мира.

ajaxCall("getMember",null,false,function(result){ 
      for(var number in result) 
       user.members.push(result[number]); 
      $scope.$apply(); // this will tel Angular to loop for changes in $scope 
     }); 

Но я призываю вас, чтобы заменить его на $ HTTP вызова:

app.controller('MemberController', function($http) { 

     $scope.members = []; 

     $http.post("data.php" ,{ request: request, datas: datas }) 
     .success(function(result){ 
      console.debug(result); 
      for(var i=0; i<result.length; i++) 
       $scope.members.push(result[i]); 
     }); 
    }); 

С помощью этого кода вам не нужно звонить $apply, потому что $ НТТР Угловое обслуживание и $apply будет называемый автоматическим в конце предиката успеха.

Подробнее о $http.get с аргументами можно найти here. $http с почтой внутри этого ответа.

Обновление:

Вы должны назначить член контроллера $scope, таким образом ваши результаты будут видны на представлении (я обновил свой код).

Во-вторых вы сказали, что ваши действия на стороне сервера является операция чтения, в этом случае заменить ваш POST с GET, например, так:

$http.get("data.php" ,{params: { request: request, datas: datas } }) 

Помните:

1. POST - когда вы удалить, добавить, обновить модель
2. GET - когда вы читаете объекты

удачи :)

Answer 2

Это не мой любимый способ сделать это, но в вашем случае вызова:

$scope.$apply(); 

После того как вы обновили вашу коллекцию.

Я думаю, что происходит то, что Angular должен запускать цикл дайджеста, чтобы обновлять представления, и прямо сейчас вы не сказали ему сделать это, потому что вы используете прямой вызов ajax. Если ваш вызов был инициирован угловым событием «ng-», тогда он узнает, что материал продолжается и дождитесь завершения звонков ... перед обновлением представлений для себя.

Так что попробуйте $ scope. $ Apply(); сначала, и если вы можете вызвать свою функцию обновления с помощью ng-click или что-то попробовать, не используя $ scope. $ apply(); и посмотреть, работает ли это.

Тогда вы должны смотреть в использовании $ HTTP, чтобы сделать REST звонки лично мне нравится нг-ресурса дополнительного модуля ...

Answer 3

var app = angular.module('app', []); 
 

 
app.controller('yourController', ['$scope', '$http', 
 
    function($scope, $http) { 
 
    $scope.user = { 
 
     data: [] 
 
    }; 
 
    $http.get('http://echo.jsontest.com/one/1/two/2/three/3').success(function(results) { 
 
     console.log(results); 
 
     for (var number in results) 
 
     $scope.user.data.push(results[number]); 
 
    }); 
 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<html ng-app="app"> 
 

 
<body ng-controller="yourController"> 
 

 
    {{user.data}} 
 

 
</body> 
 

 
</html>