23

我遇到了让我发疯的自定义指令问题。我正在尝试创建以下自定义（属性）指令：

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>

这是加载范围的控制器：

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 在控制器中发生变化（当我们调用“查询”时）。

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

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

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

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

非常感谢您！

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

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

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

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

4

4 回答 4

56

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

scope.$watch('seats', function(newval, oldval){
                console.log(newval, oldval);
                updateSeatInfo(scope,element);
            }, true);
于 2012-10-19T00:25:16.607 回答
5

我也有这个问题。这是因为我的变量最初没有在范围内定义“未定义”。Watch 似乎不适用于未定义的变量。毕竟看起来很明显。

当我的变量将由控制器有效设置时，我首先尝试使用 watch 来触发。例子：

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

在这种情况下，watch 能够检测到变量的变化。

于 2012-12-29T13:47:45.343 回答
0

我看不到您在任何地方都在使用SeatsCtrl-controller 吗？它是如何使用的？您是否已验证它已被激活，并且查询已实际执行？

检查 SeatsCtrl 是否正在使用的最快方法是简单地在console.log('SeatsCtrl actived!');其中添加一个。如果不是，则添加ng-controller="SeatsCtrl"到div.

您还可以直接在控制器内部的座位上放置一个监视和日志，以确保它不是范围界定的问题。

于 2012-06-21T11:19:14.320 回答
0

我也遇到了这个问题。我认为这是Angular中的一个问题。GitHub 上有一张“加强 $resource 期货”的票，它可能会解决这个问题，因为您真正需要的是访问您拥有的资源的承诺对象。

或者，观察者可以等到承诺解决后再触发。

与此同时，一种更优雅的不需要超时的解决方法是重新分配 $resource 上的成功回调正在监视的范围属性。这将导致观察者在适当的时间再次触发。

没有延迟的超时只是将延迟函数的评估放在当前堆栈的末尾 - 在您的情况下，您的资源恰好在那时解决了，但是如果服务器遇到这样的情况，这可能是一个问题星期一。

例子：

$scope.myAttr = MyResource.fetch(
  function (resource) { $scope.myAttr = new MyResource(angular.copy(resource)); }
);
于 2012-08-31T17:56:07.503 回答