Директива AngularJS по событию клика не отвечает

Question

У меня есть код JQuery, приведенный ниже в моем дизайне клиентских приложений, который я пытаюсь преобразовать в директиву AngularJS, как показано ниже, но по какой-либо причине событие on click не отвечает (ничего не происходит, когда я нажмите на квадраты), так что может кто-то помочь мне, рассказывая мне, что именно я делаю неправильно и как это исправить? Благодаря

Оригинальный код JQuery:

$("html").on("click", '.boxes .col .ten', function(e){ 
e.stopPropagation(); 
var numBoxes = $('.boxes .col .ten.active').length; 

if($(this).hasClass('active')) 
{ 
    $(this).removeClass('active'); 
    $(this).find('input[type="checkbox"]').val('0'); 
    return false; 
} 
else 
{ 
    if(numBoxes <10) 
    { 
     $(this).addClass('active'); 
     $(this).find('input[type="checkbox"]').val('1'); 
     return false; 
    } 
} 
}); 

Директива:

.directive('BoxesDirective', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 

    element.bind("click", '.boxes .col .ten', function(e){ 
    e.stopPropagation(); 
    var numBoxes = $('.boxes .col .ten.active').length; 

    if($(this).hasClass('active')) 
    { 
     $(this).removeClass('active'); 
     $(this).find('input[type="checkbox"]').val('0'); 
     return false; 
    } 
    else 
    { 
     if(numBoxes <10) 
     { 
      $(this).addClass('active'); 
      $(this).find('input[type="checkbox"]').val('1'); 
      return false; 
     } 
    } 
}); 



    } 
}; 
}); 

HTML:

<div class="labelTarget" boxes-directive> 
     <div class="boxes"> 
     <div class="col"> 
      <div class="col ten active"> 
      $5 
      <input id="5" name="5" type="checkbox" value="5"> 
      </div> 
      <div class="col ten"> 
      $10 
      <input id="10" name="10" type="checkbox" value="10"> 
      </div> 
      <div class="col ten"> 
      $20 
      <input id="20" name="20" type="checkbox" value="20"> 
      </div> 
      <div class="col ten"> 
      $50 
      <input id="50" name="50" type="checkbox" value="50"> 
      </div> 
      <div class="col ten"> 
      $75 
      <input id="75" name="75" type="checkbox" value="75"> 
      </div> 
     </div> 
     <div class="col"> 
      <div class="col ten active"> 
      $100 
      <input id="100" name="100" type="checkbox" value="100"> 
      </div> 
      <div class="col ten"> 
      $200 
      <input id="200" name="200" type="checkbox" value="200"> 
      </div> 
      <div class="col ten"> 
      $500 
      <input id="500" name="500" type="checkbox" value="500"> 
      </div> 
      <div class="col ten"> 
      $750 
      <input id="750" name="750" type="checkbox" value="750"> 
      </div> 
      <div class="col ten"> 
      $1000 
      <input id="1000" name="1000" type="checkbox" value="1000"> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

Answer 1

В коде jQuery вы используете $("html").on("click", но в директиве вы внезапно переключились на element.bind("click".

.on() и .bind() не то же самое. Вы должны использовать в директиве element.on().

И как @Joachim Isaksson указал, что это должно быть .directive('boxesDirective'.

Answer 2

Прежде всего, я бы рекомендовал не использовать JQuery, чтобы сделать все это класса. Посмотрите на ng-class.

Однако, чтобы ответить на вопрос. Вы привязываетесь к событию click элемента, а Angular должен знать об изменении состояния в области. Чтобы сообщить Angular, используйте $scope.$apply() в конце мероприятия.

Если вы переключитесь на ng-click и , ваш код будет выглядеть намного чище, хотя. :)

Answer 3

После изучения кода, вы должны были 2 ошибки:

1. , как Joachim Isaksson сказал, что вам нужно нижний регистр вы ДИРЕКТИВА, например: boxesDirective
2. , так как вы используете JQuery в вашем директивы, вам нужно обернуть свой элемент $ знак.

Пример:

var app=angular.module('App', []); 
app.directive('boxesDirective', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      console.log("s"); 
    $(element).bind("click", '.boxes .col .ten', function(e){ 
    e.stopPropagation(); 
    var numBoxes = $('.boxes .col .ten.active').length; 

    if($(this).hasClass('active')) 
    { 
     $(this).removeClass('active'); 
     $(this).find('input[type="checkbox"]').val('0'); 
     return false; 
    } 
    else 
    { 
     if(numBoxes <10) 
     { 
      $(this).addClass('active'); 
      $(this).find('input[type="checkbox"]').val('1'); 
      return false; 
     } 
    } 
}); 



    } 
}; 
}); 

Живой пример: http://jsfiddle.net/choroshin/dxwbb/1/