Question

现在我正在尝试为表添加用户信息，在成功发送数据后，我必须刷新整个页面才能获得更新。我想我可以使用$ scope.apply（），但我应该把它放在哪里？在承诺？这是我的代码：

服务

angular
  .module('ecom')
  .factory(
    'PCservice',
    [
      '$q',
      'sessionId',
      function($q, sessionId) {
       return {
        loadPersonalCCList : function() { // This is how I get user information from server
         var deferred = $q.defer();
         $
           .ajax({
            type : "GET",
            async: false,
            url : ECOM_BASE_URL
              + "/esapp/EDService/personalcc/cards/list?sessionID="
              + sessionId,
            dataType : "xml",
            cache : false,
            success : function(xml) {

             var data = xml2json(
               xml,
               {
                listPaths : [ /PERSONALCCLIST$/ ],
                numPaths : []
               }).OFX;

             deferred.resolve(data);

            }
           });
         return deferred.promise;
        },
        loadpaymentmethod:function(sessionId,companycode,paymenttype){
             var deferred = $q.defer();
             $
           .ajax({
            type : "GET",
            async: false,
            url : ECOM_BASE_URL+ "/esapp/EDService/system/compPayMeths",
            dataType : "xml",
            cache : false,
            data: {
            _session: sessionId,
            companyCode: companycode,
            paymentType: paymenttype
              },
            success : function(xml) {
             console.log(xml);
            /* var data = xml2json(
               xml,
               {
                listPaths : [ /PERSONALCCLIST$/ ],
                numPaths : []
               }).OFX;*/

             deferred.resolve(data);

            }
           });
         return deferred.promise;
        },
        saveNewPC: function(xmlString){ // This is where I save the new user information
             var deferred = $q.defer();
             $.ajax({
                    type: "POST",
                    url: ECOM_BASE_URL+"/esapp/EDService/personalcc/cards/save",
                    contentType: "text/xml",
                    dataType: "xml",
                    cache: false,
                    processData: false,
                    data: xmlString,
                    //success: init
                    success: function (xml) {
                       //console.log(xml);

                        deferred.resolve(xml);
                    }
                });
             return deferred.promise;
        }
       }
      } ]);

控制器

var promise = PCservice.loadPersonalCCList();
    promise.then(function(data) {

        $scope.personalccinfor = data.CCMSGSRSV1.PERSONALCARDLISTRS.PERSONALCCLISTINFO.PERSONALCCLIST;
        $scope.cardinfo = data.SIGNONMSGSRSV1.SONRS.PROFILE;
    });
    $scope.savechange = function(cardname, paymethod, webaddress, checktype, txtCCNumber, reimbValue) {
        var xmlstring = $scope.buildNewXML(cardname, paymethod, webaddress, checktype, txtCCNumber, reimbValue);
        var feedback = PCservice.saveNewPC(xmlstring);
        feedback.then(function(status) {
            PCservice.loadPersonalCCList().then(function(data){

        $scope.personalccinfor=data.CCMSGSRSV1.PERSONALCARDLISTRS.PERSONALCCLISTINFO.PERSONALCCLIST;
        $scope.cardinfo = data.SIGNONMSGSRSV1.SONRS.PROFILE;
        $scope.$apply();

    });
        });
};

HTML

<tr ng-repeat='pcdata in personalccinfor'>
        <td class='text-center'><a href="">{{pcdata.NAME}}</a><input type="hidden" name="cardId" id="cardId" value="{{pcdata.CARDID}}}"></td>
        <td class='text-center'>{{pcdata.WEBADDRESS}}</td>
</tr>

如您所见，我需要使用数据初始化页面，然后如果用户想要添加新信息，我需要重新调用loadPersonalCCList()到初始页面。

Answer 1

你的问题是你正在使用$ .ajax jquery，在制作一个ajax angular之后我不知道我是否需要运行我的摘要周期来更新我的范围变量。这就是为什么angular有$http进行ajax调用，然后运行摘要循环并更新所有范围变量。

<强> $ HTTP

它与$ .ajax的相同，但是此函数包含在$apply()函数内，该函数调用$digest个循环，$ digest循环更新整个范围内的所有变量。

隐藏$.ajax至$http来电将解决您的绑定问题。

有办法通过手动运行$apply()方法来强制更新范围级别绑定来更新绑定

if(!$scope.$$phase) //checking if any digest cycle is running or not
  $scope.$apply();

但是don't use $scope.$apply() anti pattern in Angular JS

如何在ajax调用后强制angularjs更新页面

1 个答案: