单击事件没有响应的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来完成所有类操作。请改为ng-class。

然而，要回答这个问题。您绑定到元素的click事件，Angular需要知道范围的状态更改。要让Angular知道，请在活动结束时使用$scope.$apply()。

如果切换到ng-click和ng-class，您的代码看起来会更清晰。 ：）

Answer 2

检查完代码后，您遇到了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/

Answer 3

在您的jQuery代码中，您使用$("html").on("click"，但在指令中，您突然切换到element.bind("click"。

.on()和.bind()不一样。您需要在指令中使用element.on()。

正如@Joachim Isaksson指出的那样，它应该是.directive('boxesDirective'。