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

Question

I am using semantic-ui in my project, pulgin - checkbox
someone will say if you are using jQ plugin you should use it in angular directive
but it does not work

check the box in the semantic-ui parameter in the ui semantics API document, you must check this box in init

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

I am trying to change it to angular as follows:

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 the directive in angularjs file

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

but it does not work in my project. Why?

Answer 1

You're close elem is an 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 find the input field in 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(); } } }; }); 

Answer 2

It's a bit late for the party, but you just have to move the todo-checkbox tag to the input tag (same with the semantic specific ui attributes)

Answer 3

Try

 angular.element(elem).checkbox(); 

instead

 $(elem).checkbox();