Question

我使用以下代码将“已检查”类添加/删除到无线电输入父级。当我在指令中使用JQuery选择器但在我尝试使用指令元素时失败，它可以正常工作，有人可以检查我的代码并告诉我为什么它不使用元素以及我如何可以添加/删除类检查到使用element而不是jquery选择器时，radio输入parent？感谢

    .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

当你运行它时，检查＆＃39;只使用您包含的第一个代码将类正确添加到父DIV中。（我注释掉了jQuery机制 - 我没有将jQuery添加到此页面，作为测试。）

但是，我认为您尝试完成的工作并不是因为您只是捕获点击事件。丢失其已检查属性的单选按钮不会发生单击事件，只有下一个单击事件才会发生。在jQuery中，您的选择器非常广泛 - 您可以点击每个单选按钮，因此它可以满足您的需求。但是，由于您只是单击接收点击的单选按钮，因此使用其他模式无法执行您想要的操作。 checked已添加，但从未删除。

更像Angular-ish的模式将是这样的：

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做了所有肮脏的工作，这是重点。实际上你可以比这更进一步 - 你可以减少一半的代码并用表达式完成所有操作。关键是在Angular中，你真的想要专注于DATA（模型）。您将所有行为和事件（控制器）连接到操纵该数据的事物，然后将所有DOM样式，类，模板（视图）等连接到针对相同数据的条件。这就是MVC的重点！

AngularJS指令删除父元素中的类

1 个答案: