如何在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();
      }
    }
  };
});