AngularJS中的AJAX呼叫發佈方法

我是AngularJS的新手，這是我的controller.js文件的一部分，我使登錄控制器與此服務相同。AngularJS中的AJAX呼叫發佈方法

我現在想要實現的是使用與我的服務不同的方法從AJAX調用中獲取數據，並將其像這樣傳遞給我的HTML。

這樣做的正確方法是什麼？這是我嘗試過的，並且我基於之前的Chrome Packaged App項目編寫了此代碼。不同的是，在我的第一個項目中，我有一個JavaScript文件來更改HTML中的顯示內容，這次我通過控制器，服務和應用程序來操作它。

.controller('VFCtrl', function($scope, $stateParams, $http, $ionicLoading, $state, $sce) { 
     $ionicLoading.show({ 
      template: 'Loading...', 
      duration: 1000 
     }); 

     $http.post('myService/mysite.aspx',{action: 'someMethodFromService', ParameterFromMethod: 'someValue'}) 
       .success(function (response) 
       { 
        var htmldata=''; 
        for(i=0;i<response.length;i++) 
        { 
         var htmlInfo = '<li><div class=\'col\'><a href="'+ response[i].Id +'"><img width=\'100%\' height=\'auto\' src="'+response[i].Image + '" class=\'profile-img\' /><h3>' +response[i].Name+'</h3><p>'+response[i].Title+'</p></a></div></li>'; 

         htmldata+= htmlInfo; 
        } 
        $("#vflist").html(htmldata); 
       }) 
     //I don't wanna change how to submit data in my html in the success part 
     //But if it MUST be change then I will. 
       .error(function(data, status, headers){ 
       console.log(status); 
       }); 

    })

來源

2016-04-23 JC Borlagdan

如果您使用的角度，你應該能夠通過綁定完成你正在嘗試的內容，而無需使用jQuery注入html。如果你想在頁面之間共享數據，你可以通過服務來完成。每個服務都是單身，所以如果您將數據保存到服務中的某個對象並在其他位置注入該服務，則可以在那裏訪問該數據。 – Yatrix

嗯，我得到的部分是我將使用服務在頁面之間共享數據，因爲這就是我正在做的事情，但是使用jQuery不是不好的做法，爲什麼一切都是由angularjs完成的？ –

這就是我所說的使用綁定而不是注入html。您可以使用ng-repeat和綁定來創建'li'標籤及其屬性。根本不需要jQuery。 – Yatrix

您可以設置ng-repeat並綁定數組中的對象的成員。雖然這不是基於你的代碼，但這是一個非常簡單的例子，你可以完成這個：http://codepen.io/anon/pen/LNBrbG?editors=1010。

基本上，您將ng-repeat設置爲的元素將成爲重複的模板。因此，如果您在元素中嵌入了10個元素，並且其上的ng-repeat，則會重複相同的結構。它會重複儘可能多的項目你綁定它。查看代碼筆以查看工作示例。

<ul> 
    <li ng-repeat="item in vm.items"><span style="color:red">{{ item.name }}</span></li> 
<ul>

來源

2016-04-23 03:59:34 Yatrix

你根本不需要jQuery，Angular在這裏就足夠了。另外，在Angular控制器中操作DOM不是一個好習慣。

考慮更改像下面工作示例代碼（當然JSON結構是不一樣的，你問）：

var app = angular.module("sa", []) 
 
app.controller('VFCtrl', function($scope, $http) { 
 

 
    $http.get('http://jsonplaceholder.typicode.com/posts', { 
 
     action: 'someMethodFromService', 
 
     ParameterFromMethod: 'someValue' 
 
    }) 
 
    .success(function(data) { 
 
     $scope.posts = data; 
 
    }); 
 
})

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

 
<div ng-app="sa" ng-controller="VFCtrl"> 
 
    <ul id="vflist"> 
 
    <li ng-repeat="post in posts"> 
 
     <a href="{{post.id}}">{{post.title}}</a> 
 
    </ul> 
 
</div>

來源

2016-04-23 04:30:07

AngularJS中的AJAX呼叫發佈方法

回答

相關問題