Question

我正在使用Angular和Bootstrap。我正在尝试复制ng-model for bootstrap复选框的功能。我想要完成的是：

我希望当我点击复选框（标签真的）模型更改，并且实际上可行...但是当我尝试观察对象的更改行为是经过时，什么不起作用，因为我需要两次单击其中一个用于禁用或启用该复选框。此外，如果在具有属性cm-checkbox =“model.prop”的标签元素内部，我放置{{model.anotherprop}}将不起作用（不呈现任何内容）。

从我理解的文档中，因为我想要双向数据绑定，所以范围必须像我一样定义。

感谢您的帮助！

我有以下HTML：

<label id="claim_free" class="checkbox" for="checkbox1" cm-checkbox="model.prop">
      <span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input name="claim_free" type="checkbox" value="" data-toggle="checkbox">
      same lable text
</label>

以下JS：

directive('cmCheckbox', function() {
  return {
    restrict: 'A',
    scope: {'cmCheckbox':'='},
    link: function(scope,elm,attrs) {
      scope.$watch('cmCheckbox', function() {
          console.log("first value for "+attrs.cmCheckbox+" is: "+scope.cmCheckbox);
          if (!scope.cmCheckbox) {
            console.log("checked");
            $(elm).removeClass("checked");
            $(elm).children("input").removeAttr("checked");
          } else { // false and undefined
            console.log("unchecked");
            $(elm).addClass("checked");
            $(elm).children("input").attr("checked","checked");
          }
      });
      $(elm).on('click', function(e) {
        e.preventDefault();
        var currentValue = elm.hasClass("checked") ? false : true;
        scope.$apply(function() {
          scope.cmCheckbox = currentValue;
        },true);
        scope.$parent.$apply();
      });
    }
  };
}).

这是jsFiddle：jsfiddle.net/pmcalabrese/66pCA/2

范围。$ angular in angular指令不能正常工作

0 个答案: