如何在angularJS指令中使用jQuery插件（semantic-ui）？

Question

我在我的項目中使用semantic-ui，pulgin是復選框
有人說如果使用jQ插件，你必須在angular指令中使用它
但它不起作用

在semantic-ui API文檔中的semantic-ui設置復選框，您必須將其設置為init復選框

$('.ui.checkbox').checkbox();

我試着把它改成像這樣的角度：

app.html

<div class="ui animate list">
  <div class="item ui toggle checkbox" todo-checkbox ng-repeat="item in day track by $index">
    <input type="checkbox">
    <label ng-bind="item.content"></label>
  </div>
</div>

這是angularjs文件中的指令

todoApp.directive('todoCheckbox', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      $(elem).checkbox();
    }
  };
});

但它在我的項目中不起作用。 為什么？

Answer 1

你很親密 elem是指令的元素。 在這種情況下它是

<div class="item ui toggle checkbox" todo-checkbox ng-repeat="item in day track by $index">
  <input type="checkbox">
  <label ng-bind="item.content"></label>
</div>

現在，如果我們使用find幫助我們找到elem的輸入字段，那么我們可以選擇輸入字段並運行checkbox方法。

todoApp.directive('todoCheckbox', function() {
  return {
    restrict: 'A',
    link: function(scope, elem, attrs) {
      angular.forEach(elem.find( "input" ), function(inputField) {
        inputField.checkbox();
      }
    }
  };
});

Answer 2

派對有點遲，但你應該能夠將todo-checkbox移動到input標簽（與語義ui特定屬性相同）

Answer 3

嘗試

angular.element(elem).checkbox();

代替

$(elem).checkbox();