AngularJS：$ scope。$ watch不会更新从自定义指令的$ resource获取的值

Question

我在使用自定义指令时遇到问题，这使我发疯。我正在尝试创建以下自定义（属性）html" target="_blank">指令：

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服务（请参见下面的代码）从服务器获取该ID到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>

这是正在加载示波器的控制器：

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在控制器中更改的时刻（当我们称为“查询”时）。

正如您可能在代码中看到的那样，我尝试使用$ timeout来延迟“ updateSeatInfo”的启动，但恐怕它并不是到目前为止最聪明的解决方案…

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

注意：updateSeatInfo只是一个测试函数，我将使用的实际函数要复杂一些。

关于如何应对的任何想法？

事先非常感谢您！

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

编辑2：解决（？）
好！看来我找到了一个解决方案，虽然可能不是最好的，但它工作正常！:)至于我能在这里看到http://docs.angularjs.org/api/ng.$timeout，我们可以使用$超时（超过setTimeout的包装）
无延迟 ！这很棒，因为我们没有在$ timeout内人为地延迟执行代码，但是我们正在使指令在异步请求完成之前不要运行它。

希望它也适用于长期等待的请求…

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

Answer 1

问题是手表默认情况下比较引用而不是对象。最后添加，true以使其比较值。

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