我在使用自定义指令时遇到问题,这使我发疯。我正在尝试创建以下自定义(属性)指令:
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内人为地延迟执行代码,但是我们正在使指令在异步请求完成之前不要运行它。
希望它也适用于长期等待的请求…
如果有人知道更好的解决方法,请告诉我们!
问题是手表默认情况下比较引用而不是对象。最后添加,true以使其比较值。
scope.$watch('seats', function(newval, oldval){ console.log(newval, oldval); updateSeatInfo(scope,element); }, true);