Geek asks and answers

How to make jQuery listen and activate plugins, future AngularJS ng-repeat elements?

Experienced jQuery new to AngularJS.

I have a page with a list of colors (variable number) with jQuery colorpickers attached (marked with the class ".colorpicker"). On a static PHP version of a page that works fine; but converting it to ng-repeat, jQuery will not catch future events.

Is there an event that can be caught using $ .on (), or is there any other way to apply the best methods for this with AngularJS? I searched, but every answer I found is how to set up $ .on ('click') or similar.

<ul class="unstyled">
  <li ng-repeat="color in showcolors">
    <input type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}
  </li>
</ul>
+5
source share
1 answer

, DOM / jQuery; . ng-repeat, jQuery colorpicker , DOM. - :

<ul class="unstyled">
  <li ng-repeat="color in showcolors">
    <input data-jq-colorpicker type="color" class="input-mini colorpicker" ng-model="color.hex"> {{color.category}}
  </li>
</ul>

:

yourApp.directive('jqColorpicker', function(){
    var linkFn = function(scope,element,attrs){
        // element here = $(this)
        // bind your plugin or events (click, hover etc.) here
        element.colorpicker();
        element.bind('click', function(e){
          // do something
        });
    }

    return {
        restrict:'A',
        link: linkFn
    }
});

: , . Plunker JSFiddle, .

, - jQuery Angular .

+3

More articles:


All Articles