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

Question

我在我的项目中使用semantic-ui，pulgin是checkbox
有人说如果使用 jQ 插件，你必须在 angular 指令
中使用它但它不起作用

在semantic-ui API文档中设置semantic-ui的checkbox，必须在init checkbox

中设置这个

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

我尝试将其更改为 angular，如下所示：

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 中定位输入字段，那么我们可以 select 输入字段和运行 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();

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

how to use jQuery plugin (semantic-ui) in angularJS directive?

javascript

jquery

angularjs

semantic-ui