0

データストア (Web SQL) からデータを取得するサービスがあります。その後、AngularJS 配列にデータを格納します。問題は、これが UI への変更を開始しないことです。

逆に、データストアからデータを取得した後、$get メソッドを使用して Web サービスを呼び出し、結果を前の配列に追加すると、すべてのデータが UI を更新します。

助言がありますか？Angular が変数をバインドする前に配列を埋めることは可能ですか?

どうにかしてサービスの実行を遅らせることはできますか?

コードのほとんどは、次の例から取られています: http://vojtajina.github.io/WebApp-CodeLab/FinalProject/

4

2 に答える 2

1

arrayデータを のに割り当てていると仮定してcontroller、 after を設定$scope.$apply()して UI を更新します。

元：

$scope.portfolio = {};

$scope.getPortfolio = function() {
    $.ajax({
        url: 'http://website.com:1337/portfolio',
        type:'GET',
        success: function(data, textStatus, jqXHR) {
            $scope.portfolio = data;
            $scope.$apply();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
        }
    });     

};
于 2013-07-26T19:15:01.610 に答える
1

UI を魔法のように更新するには、$scope のプロパティでいくつかの変更を行う必要があります。たとえば、残りのリソースから一部のユーザーを取得する場合は、次のようにします。

app.controller("UserCtrl", function($http) {
  $http.get("users").success(function(data) {
    $scope.users = data; // update $scope.users IN the callback
  }
)

テンプレートがロードされる前にデータを取得するより良い方法がありますが (routes/ng-view 経由):

app.config(function($routeProvider, userFactory) {
  $routeProvider
    .when("/users", {
      templateUrl: "pages/user.html",
      controller: "UserCtrl",
      resolve: {
        // users will be available on UserCtrl (inject it)
        users: userFactory.getUsers() // returns a promise which must be resolved before $routeChangeSuccess
    }
  }
});
app.factory("userFactory", function($http, $q) {
  var factory = {};
  factory.getUsers = function() {
    var delay = $q.defer(); // promise
    $http.get("/users").success(function(data){
      delay.resolve(data); // return an array of users as resolved object (parsed from JSON)
    }).error(function() {
      delay.reject("Unable to fetch users");
    });
    return delay.promise; // route will not succeed unless resolved
  return factory;
});
app.controller("UserCtrl", function($http, users) { // resolved users injected
  // nothing else needed, just use users it in your template - your good to go!
)

私は両方の方法を実装しましたが、後者は次の 2 つの理由から非常に望ましいものです。

リソースが解決されるまで、ページは読み込まれません。これにより、$routeChangeStart と $routeChangeSuccess にハンドラーをアタッチすることで、読み込み中のアイコンなどを配置できます。

さらに、ページがロードされるたびにすべてのアイテムがエンターアニメーションを煩わしく再生しないという点で、「エンター」アニメーションでより適切に再生されます（ページが読み込まれるとコールバックで更新されるのではなく、 $scope.users が事前に入力されるため）ロードされています）。

于 2013-07-26T19:07:01.437 に答える