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

Question

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

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

$('.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

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

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

Answer 1

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

<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.

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