CODEWITHSUNDEEP
javascriptjqueryangularjssemantic-ui
nataila
nataila

Reputation: 1619

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

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?

Upvotes: 6

Views: 2428

Answers (3)

Franky
Franky

Reputation: 709

Try

angular.element(elem).checkbox();

instead of

$(elem).checkbox();

Upvotes: 0

subdigit
subdigit

Reputation: 431

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)

Upvotes: 0

thank_you
thank_you

Reputation: 11107

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

Upvotes: 1

Related Questions