Директива AngularJS удалить класс в родительском элементе

Question

Я использую следующий код, чтобы добавить/удалить класс «checked» в родительский вход для радио. Он отлично работает, когда я использую селектор JQuery внутри директивы, но не удается, когда я пытаюсь использовать элемент директивы, может кто-то, пожалуйста, проверьте мой код и скажите, почему он не работает с элементом и как я могу добавить/удалить класс, родительский вход с радиоприемником при использовании элемента вместо селекторов jquery? Благодаря

.directive('disInpDir', function() {  
    return { 
     restrict: 'A', 
     scope: { 
      inpflag: '=' 
     },   
     link: function(scope, element, attrs) { 

      element.bind('click', function(){ 

       //This code will not work 
       if(element.parent().hasClass("checked")){ 
        scope.$apply(function(){ 
         element.parent().removeClass("checked"); 
         element.parent().addClass("checked");            
        });      
       }else{ 
        scope.$apply(function(){ 
         element.parent().addClass("checked"); 
        }); 
       } 



       //This code works perfectly 
       $('input:not(:checked)').parent().removeClass("checked"); 
       $('input:checked').parent().addClass("checked"); 


      });      
     } 
    }; 
    }); 

HTML:

<div class="inpwrap" for="image1"> 
    <input type="radio" id="image1" name="radio1" value="" inpflag="imageLoaded" dis-inp-dir/> 
    </div> 

    <div class="inpwrap" for="image2"> 
    <input type="radio" id="image2" name="radio1" value="" inpflag="imageLoaded" dis-inp-dir/> 
    </div> 

Answer 1

Ваш код действительно работает для меня в Plnkr (более или менее):

http://plnkr.co/edit/vJJRYQQxH7u2bKSc27UA?p=preview

При запуске этого 'проверил' класса правильно добавляется в родительские DIV, используя только первый код, который вы включили. (Я прокомментировал механизм jQuery - я не добавлял jQuery на эту страницу в качестве теста.)

Однако, я думаю, что то, что вы пытаетесь выполнить, не работает, потому что вы только захватываете клик Мероприятия. Радиокнопка, которая теряет свой проверенный атрибут, не получает событие щелчка, а только следующее. В jQuery ваш селектор действительно широк - вы нажимаете на каждый переключатель, поэтому он делает то, что вы хотите. Но так как вы только ловушки щелкаете по переключателю, то получает клик, он не делает то, что вы хотите, используя другой шаблон. checked добавляется, но не удаляется.

Более радиально-иш картина будет что-то вроде этого:

http://plnkr.co/edit/HN7tLxkRA0jUL5GPjk5V?p=preview

link: function($scope) { 
    $scope.checked = false; 

    $scope.$watch('currentValue', function() { 
     $scope.checked = ($scope.currentValue === $scope.imgNumber); 
    }); 

    $scope.setValue = function() { 
     $scope.currentValue = $scope.imgNumber; 
    }; 
    } 

То, что вы видите здесь позволяет Угловая делать всю грязную работу, которая является своеобразной точкой. Вы действительно можете пойти намного дальше, чем это - вы, вероятно, могли бы сократить половину кода и сделать все это с помощью выражений. Дело в том, что в Angular вы действительно хотите сосредоточиться на DATA (модель). Вы связываете все свои поведения и события вверх (контроллер) с вещами, которые манипулируют этими данными, а затем подключают все ваши стили DOM, классы, шаблоны (представление) и т. Д. До условностей против этих же данных. И это точка зрения MVC!