Question

我有一个指令

angular.module('eventsApp')
  .directive('calendar', function(){
    return {
      restrict: 'E',
      template: '<div id="eventCal"></div>',
      scope: {
        events: '='
      },
      link: function(scope, elem, attrs){
        var eventCal = $('#eventCal');
        eventCal.fullCalendar({
          handleWindowResize: true,
          events: scope.events.list
        });

        scope.$watch('events', function(newModel, oldModel){
          console.log(newModel);
          console.log(newModel.list);
          eventCal.fullCalendar('removeEvents');
          eventCal.fullCalendar('addEventSource', newModel.list);
        });

      }
    }
  });

带标记

<calendar events="events"></calendar>

和控制器

angular.module('eventsApp')
  .controller('EventsCtrl', ['$scope', 'calendarService',
    function ($scope, calendarService) {
      $scope.events = {
        list: []
      };

      $scope.$on('configLoaded', function(event, settings){
        calendarService.init(settings);
        calendarService.getEvents($scope.view);
      });

      $scope.$on('eventsLoaded', function(event, events){
        angular.forEach(events, function(value, key){
          $scope.events.list.push(value);
          $scope.$broadcast('eventsReady', $scope.events);
        });
      });

}]);

scope.$watch方法似乎不起作用。 console.logs触发一次，并在触发时将newModel显示为空（访问其属性list返回undefined）但正确引用该对象，因为console.log(newModel)显示已填充的模型（即在手表已经运行之后，对象显然已被填充。如果对象正在改变，为什么手表不再被调用？是否有其他方法可以检查范围的变化？

Answer 1

尝试：

scope.$watch('events', function(newModel, oldModel){
    console.log(newModel);
    console.log(newModel.list);
    eventCal.fullCalendar('removeEvents');
    eventCal.fullCalendar('addEventSource', newModel.list);
}, true);

效率有点低但应该有效。你最后需要true来使手表递归。或者，您可以直接观看events.list。在这种情况下，true将不再需要。

$ scope。$ watch没有在指令中被解雇

1 个答案: