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?

@StanislavKralin your edits would be better received if you explained, in your edit summary, why you're removing the tag. It's obvious from the diff that you are remove the tag. — Heretic Monkey
– Heretic Monkey, Commented Jun 14, 2017 at 22:07

thank_you · Accepted Answer · 2015-05-21 04:25:10Z

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

edited May 21, 2015 at 4:25

answered May 20, 2015 at 3:35

thank_you

11.1k19 gold badges108 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

thank_you Over a year ago

Your message was cut-off. Can you post again? I'm happy to help solve your problem.

nataila Over a year ago

It doesn't work with your method, in officlal API, the checkbox() is bind on .ui.checkbox element, I think the problem is not which elem to bind

thank_you Over a year ago

I made a slight adjustment to my code. Try it out. Adjustment below. elem.find( "input" )[0].checkbox();

nataila Over a year ago

after the adjustment will an error code，TypeError: elem.find(...)[0].checkbox is not a function

nataila Over a year ago

I try this, if I don't use ng-repeat, elem.checkbox() can work normal,but if I use ng-repeat,it can't work,I think this is the main reason

|

subdigit · Accepted Answer · 2016-02-17 15:33:13Z

0

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)

answered Feb 17, 2016 at 15:33

subdigit

4314 silver badges9 bronze badges

Comments

Franky · Accepted Answer · 2016-06-27 09:27:34Z

0

Try

angular.element(elem).checkbox();

instead of

$(elem).checkbox();

answered Jun 27, 2016 at 9:27

Franky

7091 gold badge5 silver badges14 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related