javascript - AngularJS : $scope. $watch 没有更新从自定义指令上的 $resource 获取的值

Question

我遇到了一个让我发疯的自定义指令问题。我正在尝试创建以下自定义(属性)指令:

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)试图显示一个座位 ID 列表(例如，对于剧院)，我将通过 $resource 服务(参见下面的代码)从服务器获取到一个 div (元素)。

我将它与这个简单的部分 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>

这是加载作用域的 Controller :

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

“席位”是一个简单的服务，使用 $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 正在 Controller 中工作(当我们调用“查询”时)。

正如您在代码中看到的那样，我尝试使用 $timeout 来延迟“updateSeatInfo”的启动，但恐怕这不是迄今为止最聪明的解决方案...

我也尝试不发出 JSON 请求，而是在 $scope.seats 中使用硬编码字典，它可以工作，所以这似乎是一个同步问题。

注意:updateSeatInfo 只是一个测试函数，我实际使用的函数有点复杂。

你知道如何应对吗？

非常感谢您!

编辑 1: 添加了 app.js，我在其中使用路由器调用 SeatsCtrl，感谢 Supr 的建议。但是，我仍然遇到同样的问题。

编辑 2:已解决!(?)好的!看来我找到了一个解决方案，它可能不是最好的，但它工作正常! :)据我所见http://docs.angularjs.org/api/ng.$timeout ，我们可以使用 $timeout(对 setTimeout 的封装)没有延迟!这很棒，因为我们不会在 $timeout 内人为地延迟代码的执行，而是让指令在异步请求完成之前不运行它。

希望它也适用于长时间等待的请求...

如果有人知道更好的解决方法，请告诉!

Answer 1

问题是 watch 默认比较引用而不是对象。将 ,true 添加到末尾以使其比较值。

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