2014-01-09 2 views
1

У меня есть две директивы checkbox, которые я делаю: fancyCheckBox и, checkAllCheckbox. Я пытаюсь добавить трансляцию событий для проверки, чтобы придать фэнтезийные флажки (их будет много), услышать это событие и проверить себя, соответствуют ли они критериям.Не удается подписаться на события в Angular Directive

Вот мой fancyCheckBox:

myDir.directive('fancyCheckBox', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      isDomain: '=isDomain', 
      domain: '=domainId', 
      url: '=urlId', 
      reason: '@reason', 
      clickCb: '&clickCb', 
      startChecked: '=isChecked' 
     }, 
     template: '<input type="checkbox" data-ng-click="toggleMe()" data-ng-model="isChecked" />', 
     link: function(scope, elem, attrs) { 
      scope.isChecked = angular.copy(scope.startChecked); 
      scope.toggleMe = function() { 
       scope.isChecked = (!scope.isChecked); 
       scope.$eval(scope.clickCb(scope)); 
      } 
      scope.$on('checkAllEvent', function() { // Error on this line 
       console.log('Herd a check all event'); 
      }); 
     } 
    } 
}); 

Линия scope.on('checkAllEvent' производит эту ошибку:

TypeError: Object # has no method 'on'"

А вот мой чек все флажок:

myDir.directive('checkAllCheckbox', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      reason: '@reason', 
      clickCb: '&clickCb', 
      startChecked: '=isChecked' 
     }, 
     template: '<input type="checkbox" data-ng-click="checkAll()" data-ng-model="isChecked" />', 
     link: function(scope, elem, attrs) { 
      scope.isChecked = (scope.startChecked) ? angular.copy(scope.startChecked) : false; 
      scope.checkAll = function() { 
       scope.isChecked = (!scope.isChecked); 
       scope.$eval(function() { 
       scope.$eval(function() { 
        scope.$broadcast('checkAllEvent'); 
        scope.clickCb(scope) 
       }); 
      }); 
     } 
      } 
     } 
    } 
}); 

Любая идея, почему я могу» t, похоже, транслируются или подписываются на события в моей директиве?


EDIT. Я изменил scope.on и scope.broadcast на scope.$on и scope.$broadcast. Это остановило ошибку, но мой fancyCheckBox все еще не получает событие. Есть идеи? Я думаю, это потому, что это не в правильном объеме, но я не знаю, как его получить.

+3

попробуйте 'scope. $ Broadcast' вместо' scope.broadcast' и 'scope. $ On' вместо' scope.on' –

+0

и 'scope. $ On' вместо' scope.on'. –

+1

Вы должны использовать корневой указатель для вещания, который вы не уверены в объеме: http://docs.angularjs.org/api/ng.ryrootScope –

ответ

0

Вы можете попробовать использовать $ rootScope?

  $scope.$eval(function() { 
       $rootScope.$broadcast('checkAllEvent'); 
       scope.clickCb(scope) 
      }); 

EDIT:

Вы, возможно, потребуется вводить $ rootScope в вашу директиву

myDir.directive('checkAllCheckbox', function($rootScope) {... 
+0

Я не знал, что вы можете просто добавить $ rootScope в директиву. Похоже, я пропустил очевидное. Большое спасибо, это решило мою проблему. – RachelC

+0

Разве вы не просто любите принимаемые ответы, даже не помните о том, кто спросил и принял ответ ... @RachelD – Beyers

0

Ответ на ваш обновленный вопрос:

$ широковещательный отправляет имя события вниз к все детские прицелы (и их дети), уведомляющие зарегистрированный $ on слушатели. Жизненный цикл события начинается с области, в которой вызывается $ broadcast.

$ emit отправляет имя события вверх через иерархию областей, уведомляющую зарегистрированные $ на слушателях. Жизненный цикл события начинается с области, в которой был вызван $ emit.

Других слов, если ваша checkAllCheckbox директива сфера является родителем для вашего fancyCheckBox директивы области применения, использование $ вещания, если это ребенок, использовать $ испускает, если он находится на то же использование сферы либо $ вещания или $ испускают, или если у вас нет заранее, иерархия использует $ broadcast прямо на $ rootScope.

Смежные вопросы