Skip to main content
added 119 characters in body
Source Link
Alex Choroshin
  • 6.2k
  • 2
  • 31
  • 36

After examining your code, you had 2 errors:

  1. as Joachim Isaksson said, you need to lower-case you directive, for example: boxesDirective
  2. since you are using JQuery in your directive, you need to wrap your element with $ sign.

Example:

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;
        }   
    } 
});



    } 
}; 
});

Live example: http://jsfiddle.net/choroshin/dxwbb/1/

After examining your code, you had 2 errors:

  1. as Joachim Isaksson said, you need to lower-case you directive, for example: boxesDirective
  2. since you are using JQuery in your directive, you need to wrap your element with $ sign.

Example:

 app.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;
        }   
    }}); }};});

Live example: http://jsfiddle.net/choroshin/dxwbb/1/

After examining your code, you had 2 errors:

  1. as Joachim Isaksson said, you need to lower-case you directive, for example: boxesDirective
  2. since you are using JQuery in your directive, you need to wrap your element with $ sign.

Example:

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;
        }   
    } 
});



    } 
}; 
});

Live example: http://jsfiddle.net/choroshin/dxwbb/1/

Source Link
Alex Choroshin
  • 6.2k
  • 2
  • 31
  • 36

After examining your code, you had 2 errors:

  1. as Joachim Isaksson said, you need to lower-case you directive, for example: boxesDirective
  2. since you are using JQuery in your directive, you need to wrap your element with $ sign.

Example:

 app.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;
        }   
    }}); }};});

Live example: http://jsfiddle.net/choroshin/dxwbb/1/