Angularjs指令：如何使用指令操作复选框

我正在尝试为复选框创建一个功能切换开关指令。我从github尝试了一些常见的解决方案，但没有一个能做到以下所有方面：

• 考虑

  ng真实值

• 正确更新父控制器的作用域
• 正确地与父表单的验证状态联系起来（我的意思是，有了一些解决方案，当更改值时，表单仍然是“原始的”，等等）

但是，如果我创建了一个使用转换通过复选框的指令，那么我的所有要求都会得到满足。然而，当我的“花式”切换开关被点击时，我想不出一种方法来改变我的转置复选框输入的状态

以下是我的指令的精简版本：

app.directive('toggleSwitch',function(){
  return {
    restrict: 'AE',
    replace: true,
    transclude: true,
    template: '<span class="switch" ng-click="toggleSwitch()"><span class="fancySwitch"></span><span ng-transclude></span></span>',
    link: function(scope, elem){
      scope.toggleSwitch = function(){
        //modify my fancy switch via classes (I can handle this part)

        //How do I modify the status of my checkbox? (this needs to toggle the status of the checkbox - checked or no)

      };
    }
  };
});

app.directive（'toggleSwitch'，function（）{
返回{
限制：“AE”，
替换：正确，
是的，
模板：“”，
链接：功能（范围、要素）{
scope.toggleSwitch=函数（）{
//通过类修改我的花式开关（我可以处理这部分）
//如何修改复选框的状态？（这需要切换复选框的状态-选中或否）
};
}
};
});

Edit：我找到了一种不用转换就能实现目标的方法（见下文）。

---

我已经更新了问题标题，以更好地反映我最初的挑战，并在下面添加了一个解决方案作为答案。

我发现，如果我保留原始输入并对其应用指令，那么我就可以利用ngModel controller实现我想要的：

我使用

before（）

预先设置自定义开关，然后向其添加单击事件侦听器。通过不替换指令模板中的输入，输入仍然是父窗体的一部分，并且是父窗体范围的一部分（使我能够访问元素上的验证属性，从而访问整个窗体）

单击开关时，我可以使用

$setViewValue

切换复选框状态，而且我不必担心处理

ng true value

，因为这已经解决了

$setViewValue

将“神奇地”导致父窗体运行验证并更改“原始”状态等。我还可以对输入本身执行其他操作，如

$setDirty（）

和

$validate（）

，这是我使用转换无法执行的（我可以找到）。此外，没有转换，我的指令更倾向于视图

<input toggle-switch ts-true-label="Affirmative" ts-false-label="Negative" type="checkbox" name="isApproved" ng-model="sampleForm.isApproved" ng-true-value="'Yes'" ng-false-value="'No'">

然后是指令：

app.directive('toggleSwitch',function($timeout){
    return {
      restrict: 'AE',
      replace: false,
      require: '?ngModel',
      link: function (scope, elem, attrs, ngModel){

        var switchElem;//the new switch element

        //Hide the checkbox
        elem.css({display: 'none'});

        /**
         * Toggle the switch. This function is called on the click event on the generated toggle switch
         */
        var toggleTheSwitch = function(){
          //toggle the checkbox
          if(ngModel.$viewValue === true){
            ngModel.$setViewValue(false);//note: setting view value sets the value for the view (ie, checks the checkbox, etc, then sets appropriate model view for us, also the form validates for us)
            switchElem.removeClass('checked');
          }
          else{
            ngModel.$setViewValue(true);
            switchElem.addClass('checked');
          }
          //run all checks and set appropriate status for this individual elem
          ngModel.$setDirty();
          ngModel.$setTouched();
          ngModel.$validate();
          ngModel.$render();
        };

        /**
         * Creates and adds the switch html to the dom
         */
        var createSwitch = function(){
          if(switchElem){
            switchElem.remove();
          }
          //Create the toggle switch
          var switchHTML = '';
          switchHTML += '<span class="switch' + (attrs.class ? ' ' + attrs.class : '') + ' ' + (ngModel.$viewValue ? 'checked' : '') +'" >';
          switchHTML +=   '<span class="label checkedLabel">'+(attrs.tsTrueLabel ? attrs.tsTrueLabel: '')+'</span>';
          switchHTML +=   '<span class="label uncheckedLabel">'+(attrs.tsFalseLabel ? attrs.tsFalseLabel: '')+'</span>';
          switchHTML +=   '<small></small>';
          switchHTML += '</span>';

          switchElem = angular.element(switchHTML);//create angular jqlite object
          elem.before(switchElem);//add new stuff before the checkbox
        };


        //After the directive is done loading, we can access ngModel controller
        $timeout(function() {
          //create the switch
          createSwitch();

          //set onclick event
          switchElem.on('click', function(){
            toggleTheSwitch();
          });
        });

      }

    };
  });

app.directive（'toggleSwitch'，函数（$timeout）{
返回{
限制：“AE”，
替换：false，
要求：“？ngModel”，
链接：功能（范围、要素、属性、ngModel）{
var switchElem；//新的开关元素
//隐藏复选框
css（{display:'none'}）；
/**
*切换开关。在生成的切换开关上的单击事件上调用此函数
*/
var toggleTheSwitch=函数（）{
//切换复选框
if（ngModel.$viewValue==true）{
ngModel.$setViewValue（false）；//注意：设置视图值为视图设置值（即，选中复选框等，然后为我们设置适当的模型视图，表单也为我们验证）
switchElem.removeClass（“选中”）；
}
否则{
ngModel.$setViewValue（真）；
switchElem.addClass（'checked'）；
}
//运行所有检查并为此单个元素设置适当的状态
ngModel.$setDirty（）；
ngModel.$settouch（）；
ngModel.$validate（）；
ngModel.$render（）；
};
/**
*创建切换html并将其添加到dom
*/
var createSwitch=函数（）{
if（switchElem）{
switchElem.remove（）；
}
//创建切换开关
var-switchHTML=''；
switchHTML+=''；
switchHTML+=''+（attrs.tsTrueLabel？attrs.tsTrueLabel:''）+''；
switchHTML+=''+（attrs.tsFalseLabel？attrs.tsFalseLabel:''）+''；
switchHTML+=''；
switchHTML+=''；
switchElem=angular.element（switchHTML）；//创建angular jqlite对象
elem.before（switchElem）；//在复选框前添加新内容
};
//指令加载完成后，我们可以访问ngModel控制器
$timeout（函数（）{
//创建交换机
createSwitch（）；
//设置onclick事件
开关打开（'单击'，函数（）{
切换开关（）；
});
});
}
};
});

对于其他人，请随意使用它。当然，您必须自己创建css