AngularJS：サービスを使用してデータバインディングが期待通りに機能しない

Question

AngularJSのサービスに問題があります。 初心者であることは、おそらく私がここで欠けている重要なことです。

タイトル{{p01g.visiteTitel}}は魔法のように爽やかではありませんが、「sometitle」を表示し続けます。

ng-repeatは期待どおりに動作しています。

（のDataFactoryが$リソースを使用してリモートサーバに接続するサービスである）

マイサービス：

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 
      } 
     }); 

    }; 

}]); 

マイコントローラ：

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; 

}]); 

マイ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

コードを正確にコピーしてplunkrを作成し、サンプルデータを返すために自分自身のdataFactoryを追加しました。エラーはなく、データは正常にバインドされています。この問題はdataFactoryの実装にあります。それはコールバック関数を期待していることを確認してください。なぜなら、コールバック関数を渡しているからです。

編集：ここに新しいコードplunkrがあります。これは私があなたの問題を再現すると信じています。

vm.visiteTitel = p00Service.visiteTitel; 

はp00Service.visiteTitel内の文字列の値にvm.visiteTitelを設定されていますが、あなたの中にvisiteTitelを更新するので、もしそれがは、p00Service.visiteTitelへの参照を取得していないので、だから、タイトルが更新取得されていない理由は、 p00Service（この場合、$resourceコールバックが非同期であるために発生します）、vm.visiteTitelには影響しません。データがロードされた後

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

をして、このコールバックを呼び出すためにあなたのサービスを更新：この作品を作るために

一つの方法は、そのようなあなたのコントローラ値を更新するためにp00Serviceにコールバックを渡すことであろう

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

service.findVisites = function (datum, callback) { 

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

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

}; 

は、このコードは、ビットをクリーンアップが、ここではvm.visitesとvm.visiteTitel正しく更新取得を実証実用plunkrであることができます。

Answer 2

のDataFactoryは、次のようになります。あなたは問題を特定することが容易になるか `dataFactory`のように見える、詳細な情報を持っている場合は

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