web-dev-qa-db-ja.com

AngularJS：$ scope。$ watchは、カスタムディレクティブの$ resourceからフェッチされた値を更新しません

私を夢中にさせているカスタムディレクティブに問題があります。次のカスタム（属性）ディレクティブを作成しようとしています。

angular.module('componentes', [])
    .directive("seatMap", function (){
        return {
            restrict: 'A',
            link: function(scope, element, attrs, controller){

                function updateSeatInfo(scope, element){
                    var txt = "";
                    for (var i in scope.seats)
                        txt = txt + scope.seats[i].id + " ";
                    $(element).text("seat ids: "+txt);
                }

                /* 
                    // This is working, but it's kind of dirty...
                    $timeout(function(){updateSeatInfo(scope,element);}, 1000);
                */

                scope.$watch('seats', function(newval, oldval){
                    console.log(newval, oldval);
                    updateSeatInfo(scope,element);
                });
            }
        }
    });

この「属性タイプ」ディレクティブ（seatMapと呼ばれます）は、$ resourceサービス（下記のコードを参照）を介してサーバーからdiv（要素）にフェッチする座席ID（たとえば、劇場用）のリストを表示しようとしています。

私はこの単純な部分的なhtmlでそれを使用しています：

<div>
    <!-- This is actually working -->
    <ul>
        <li ng-repeat="seat in seats">{{seat.id}}</li>
    </ul>

    <!-- This is not... -->
    <div style="border: 1px dotted black" seat-map></div>
</div>

そして、これはスコープをロードしているコントローラーです：

function SeatsCtrl($scope, Seats) {
    $scope.sessionId = "12345";
    $scope.zoneId = "A";
    $scope.seats = Seats.query({sessionId: $scope.sessionId, zoneId: $scope.zoneId});
    $scope.max_seats = 4;
}

「Seats」は、$ resourcesを使用してサーバーからJSONをフェッチする単純なサービスです。

angular.module('myApp.services', ['ngResource'])
    .factory('Seats', function($resource){
        return $resource('json/seats-:sessionId-:zoneId.json', {}, {});
    })
;

app.js（asientos_libres.htmlは私が使用していた部分です）：

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'componentes']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {templateUrl: 'partials/asientos_libres.html', controller: SeatsCtrl});
    $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

問題は、ディレクティブのリンク関数で「scope。$ watch」を設定して、スコープが「seats」属性がIDのリストを更新するように変更されているかどうかを確認できるように設定したにもかかわらず、 $ scope.seatsがコントローラーで変化している瞬間（ "query"を呼び出すとき）。

コードを見るとわかるように、$ timeoutを使用して "updateSeatInfo"の起動を遅らせようとしましたが、これははるかに賢い解決策ではないようです...

また、JSONリクエストを行わないようにしましたが、$ scope.seatsでハードコードされた辞書を使用しました。これは機能するため、同期の問題のようです。

注：updateSeatInfoは単なるテスト関数であり、実際に使用する関数はもう少し複雑です。

それに対処する方法について何か考えはありますか？

よろしくお願いします！

編集1：app.jsを追加しました。ルーターを使用してSeatsCtrlを呼び出しています。Suprの助言に感謝します。しかし、私はまだ同じ問題を抱えています。

編集2：解決しました！（？）わかりました！私は解決策を見つけたようですが、それは最善ではないかもしれませんが、正しく機能しています！ :)私がここで見る限り http://docs.angularjs.org/api/ng.$timeout 、$ timeout（setTimeoutのラッパー）遅延なし！ $ timeout内のコードの実行を人為的に遅らせているわけではないため、これは素晴らしいことですが、非同期要求が完了するまで実行しないようにディレクティブを作成しています。

長い待ち時間のリクエストでも機能することを願っています...

誰かがそれを修正するより良い方法を知っているなら、教えてください！

javascriptjsonwatchangularjs
23
Sheniff

問題は、ウォッチがデフォルトでオブジェクトではなく参照を比較することです。最後に、trueを追加して、代わりに値を比較します。

scope.$watch('seats', function(newval, oldval){
                console.log(newval, oldval);
                updateSeatInfo(scope,element);
            }, true);
56
Bryan Mundie

私もこの問題を抱えていました。これは、私の変数が最初はスコープ内で「未定義」に定義されていなかったためです。ウォッチは未定義の変数では機能しないようです。結局明らかなようです。

最初に、変数をコントローラーによって効果的に設定するタイミングをトリガーするために、ウォッチを使用しようとしました。例：

myApp.controller('Tree', function($scope, Tree) {

Tree.get({},
function(data) { // SUCCESS
    console.log("call api Tree.get succeed");
    $scope.treeData = data;
},

function(data) { // FAILURE
    console.log("call api Tree.get failed");
    $scope.treeData = {};
});
});

サービスを呼び出す前に空のオブジェクトで変数を初期化することで解決しました：

myApp.controller('Tree', function($scope, Tree) {

$scope.treeData = {};      // HERE

Tree.get({},
function(data) { // SUCCESS
    console.log("call api Tree.get succeed");
    $scope.treeData = data;
},

function(data) { // FAILURE
    console.log("call api Tree.get failed");
    $scope.treeData = {};
});
});

その場合、ウォッチは変数の変化を検出できました。

4
t4ncr3d3

私にもこの問題があります。 Angularの問題だと思います。 GitHubに "beef up $ resource futures" へのチケットがあります。実際に必要なのは、所有しているリソースのpromiseオブジェクトへのアクセスであるため、おそらくこの問題に対処します。

または、ウォッチャーは約束が解決されるまで発砲するのを待つことができます。

それまでの間、タイムアウトを必要としないこれを修正するもう少しエレガントな方法は、$ resourceの成功コールバックから監視されているスコーププロパティを再割り当てすることです。これにより、ウォッチャーが適切なタイミングで再度発砲します。

遅延のないタイムアウトは、遅延関数の評価を現在のスタックの最後に置くだけです-あなたの場合、あなたのリソースはたまたまそれで解決されましたが、サーバーが月曜日。

例：

$scope.myAttr = MyResource.fetch(
  function (resource) { $scope.myAttr = new MyResource(angular.copy(resource)); }
);
0
Joe Martinez

SeatsCtrl- controllerをどこで使用しているのかわかりませんか？使い方は？そして、それがアクティブになっていて、クエリが実際に実行されていることを確認しましたか？

SeatsCtrlが使用されているかどうかを確認する最も簡単な方法は、その中にconsole.log('SeatsCtrl actived!');を追加することです。そうでない場合は、divにng-controller="SeatsCtrl"を追加します。

また、スコープ内の問題ではないことを確認するために、コントローラ内の直接シートにウォッチとログを配置することもできます。

0
Supr