AngularJS: veri bağlama hizmeti kullanılarak beklendiği gibi çalışmıyor

Question

AngularJS hizmetlerinde sorun yaşıyorum. Yeni doğmuş olmak, muhtemelen burada eksik olduğum önemli bir şey.

{{p01g.visiteTitel}} başlığı sihirli bir şekilde yenilenmiyor ancak "sometitle" ifadesini görüntülemeye devam ediyor.

ng-yinelemesi beklendiği gibi çalışıyor.

(DataFactory $ kaynağı kullanarak bir uzak sunucuya bağlayan bir hizmettir)

Benim hizmeti:

myApp.service('p00Service', ['dataFactory', function(dataFactory) { 

    var service = this; 

    service.visites = []; 
    service.visiteAantal = 0; 
    service.visiteTitel = "sometitle"; 

    service.findVisites = function (datum) { 

     dataFactory.get({verb: "search", q: datum}, function (data) { 
      angular.copy(data.visites, service.visites); 
      service.visiteAantal = service.visites.length; 
      if (service.visiteAantal === 0) { 
       service.visiteTitel = "geen visites op " + datum 
      } else if (service.visiteAantal === 1) { 
       service.visiteTitel = "1 visite op " + datum 
      } else { 
       service.visiteTitel = service.visiteAantal + " visites op " + datum 
      } 
     }); 

    }; 

}]); 

Benim denetleyicisi:

myApp.controller('p01gCtrl', ['p00Service', function (p00Service) { 

    var vm = this; 

    var datum = moment(); //I'm using moment.js -> moment() is date of today 

    p00Service.findVisites(datum); 

    vm.visites = p00Service.visites; 
    vm.visiteTitel = p00Service.visiteTitel; 

}]); 

Benim HTML:

<div class="p01g" ng-controller="p01gCtrl as p01g"> 

    <div class="well_grey" style="min-height:40px;max-height:40px;max-width:330px"> 

     <p style="font-size:20px;text-align:center;cursor:pointer;"> 

       {{p01g.visiteTitel}} 

     </p> 

    </div> 

    <div class="well" style="min-height:190px;max-height:190px;max-width:330px"> 

     <table style="width:100%;line-height:40px"> 

       <tbody ng-repeat="visite in p01g.visites"> 

        <tr> 
         <td style="width:20%;line-height:40px;padding-left:7px"><span style="font-size:16px">{{visite.t133datum | date:"dd/MM/yy"}}</span></td> 
         <td style="width:60%;line-height:40px;text-align:center"><span style="font-size:16px">{{visite.t133achternaam}}</span></td> 
         <td style="width:20%;line-height:40px;padding-left:30px"><span style="font-size:16px">{{visite.t133classificatie}}</span></td> 
        </tr> 

       </tbody> 

     </table> 

    </div> 


</div> 

Answer 1

Kodunuzu tam olarak kopyaladım ve bir plunkr oluşturdum ve örnek verisi döndürmek için kendi dataFactory'umu ekledim ve hata yok ve veriler iyi durumda oluyor, bu yüzden sorunun dataFactory uygulamasında ya da aradığınız şekilde olduğuna inanıyorum (bir geriçağırım işlevi beklediğinden emin olun, çünkü bunu ilettiğiniz şeydir).

Düzenleme: Güncelledığınız kodun doğru olduğunu düşündüğünüz yeni bir plunkr yayımlanmıştır. Yani

vm.visiteTitel = p00Service.visiteTitel; 

p00Service.visiteTitel içinde dize değerine vm.visiteTitel ayar olduğu için başlık güncellenen almıyor nedeni budur, ancak size visiteTitel güncellemek eğer öyleyse DEĞİL, p00Service.visiteTitel bir başvuru alma aşağıdadır Bu ödevden sonra p00Service ($resource geri arama async olduğundan bu durumda oluyor), vm.visiteTitel üzerinde hiçbir etkisi yoktur. veri yüklendikten sonra

p00Service.findVisites(datum, function(visites, visiteTitel) { 
    vm.visites = visites; 
    vm.visiteTitel = visiteTitel; 
}); 

ve sonra bu geri arama aramak için hizmetinizi güncellemek: bu işi yapmak için

bir yolu şöyle Denetleyiciniz değerlerini güncellemek için p00Service bir geri arama geçmek olacaktır

service.visites = []; 
service.visiteAantal = 0; 
service.visiteTitel = "sometitle"; 

service.findVisites = function (datum, callback) { 

    dataFactory.get({}, function (data) { 
    ... 

     if(callback) { 
      callback(service.visites, service.visiteTitel); 
     } 
    }); 

}; 

Bu kod biraz temizlik, ama burada vm.visites ve vm.visiteTitel doğru şekilde güncellendiğini gösteren bir çalışılabilir plunkr olduğunu edilebilir.

Answer 2

DataFactory şuna benzer:

myApp.factory("dataFactory", ['$resource', function ($resource) { 
    return $resource("/vf/rest/visites/:verb", {}, { 
     get: {method: "GET", isArray: false, cache: false} 
    }); 
}]);