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

I use semantic-ui in my project, the pulgin is checkbox
someone say if use jQ plugin, you must use it in angular directive
but it doesn't work

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

the checkbox of semantic-ui setting in semantic-ui API document, you must set this to init checkbox

在semantic-ui API文档中的semantic-ui设置复选框,您必须将其设置为init复选框

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

I try to change it to angular like this:

我试着把它改成像这样的角度:

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>

and this is directive in angularjs file

这是angularjs文件中的指令

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

but it doesn't work in my project. Why?

但它在我的项目中不起作用。为什么?

3 个解决方案

#1

You're close. elem is the element of the directive. In this case it is

你很亲密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>

Now, if we use find to help us locate the input field within the elem, then we can select the input field and run the checkbox method.

现在,如果我们使用find来帮助我们找到elem中的输入字段,那么我们可以选择输入字段并运行checkbox方法。

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

#2

A bit late to the party but you should be able to just move the todo-checkbox to the input tag (same with the semantic ui specific attributes)

派对有点晚,但你应该能够将todo-checkbox移动到输入标签(与语义ui特定属性相同)

#3

Try

angular.element(elem).checkbox();

instead of

$(elem).checkbox();

#1