从 AJAX 调用返回的值未在 Angular JS 中的控制器中设置为变量

value returned from ajax call not getting set to variable in controller in angular js

本文关键字：控制器 JS 设置 变量 Angular 调用 AJAX 返回      更新时间：2023-09-26

HTML 

<div id="SalaryDiv">
    <div ng-controller="SalaryController as sal">
       <div ng-repeat="salaryDetail in sal.data">
           <p>{{salaryDetail.Name}}</p>
           <p>{{salaryDetail.Salary}}</p>    
       </div>    
    </div>
</div>

.JS

(function () {
    var salary = angular.module("SalaryDetails", []);
    salary.controller("SalaryController", function () {
        var newData = getAssociateData();
        alert(newData);  //here it is alerting as undefined
        this.data = salaryDetails;
    });
    function getAssociateData() {
        var returnData;
        $.ajax({
            url: "https://gist.githubusercontent.com/vigneshvdm/862ec5a97bbbe2021b79/raw/d7155b9c7fd533597c912fc386682e5baee1487a/associate.json",
            type: "GET",
            success: getDetails
        });
        function getDetails(data) {
            salaryDetails = data;
            return data;
        };
    };
}());

这里调用了成功函数，但是值没有被设定

1） 来自 getAssociateData 的返回值是 $.ajax 的返回值 - 这不是您返回的data。 $.ajax是异步调用。

2）你应该使用Angular的$http而不是jQuery的$.ajax - 这将自动将更改应用于视图（即它将代表你调用$scope.$apply()）。

您似乎也希望this.data是一个数组（我从使用ng-repeat="salaryDetail in sal.data"收集，所以push而不是分配。

salary.controller("SalaryController", function ($http) {
  var url = "https://gist.gith....json";
  var vm = this; // your "Controller As" ViewModel
  vm.data = [];
  $http.get(url).then(function(salaryDetail){
     vm.data.push(salaryDetail);
  }
}

这是为了说明。我同意这里的其他建议，即HTTP调用应该在服务中抽象出来，而不是将它们保留在控制器中。但是，一步一个脚印...

您应该使用 $http 服务。

salary.controller("SalaryController", function ($scope, $http) {
    $scope.salaryDetails = null;
    var url = 'https://gist.githubusercontent.com/vigneshvdm/862ec5a97bbbe2021b79/raw/d7155b9c7fd533597c912fc386682e5baee1487a/associate.json';
    $http.get(url).
        success(function (data) {
            $scope.salaryDetails = data;
        });
});

注意：我把它放在这里的控制器中，但作为最佳实践，您应该只将$http依赖项注入到您的自定义服务中。

每当您尝试在控制器内部调用 ajax 调用时，它都不会触发角度摘要，因此控制器变量不会更新。

理想的方法是在工厂中执行此操作，然后从控制器调用工厂方法。

代码示例：

appModule.factory('Search', function($rootScope, $http, $q) {
  return {
    var deferred = $q.defer();
    $http.get('https://gist.githubusercontent.com/vigneshvdm/862ec5a97bbbe2021b79/raw/d7155b9c7fd533597c912fc386682e5baee1487a/associate.json').success(function(response) {
      deferred.resolve({
         data: response)};
    });
  return deferred.promise;
 }
});

此代码正在使用$q服务以使其更干净。现在只需将此工厂（搜索）注入控制器并按原样使用它。

相关文章：