CODEWITHSUNDEEP
javascripthtmlangularjs
Spring
Spring

Reputation: 11835

Angular directive within jQuery plugin does not work

I have a directive which uses a custom jQuery Plugin, The plugin returns template html to show some list and it works good, BUT when I try to also use an AngularJs directive inside that template something like "ng-click" or one of my custom directives it just does not pick it up.

When I open the source in firebug or chrome debugger tools I can see there is no class="ng-scope" appended to that div which usually is the case in correctly working angular controlled divs. But I see this div is in hiearchialy under the main ng-app div, so I thought it must be inherited to all child divs.

Again This controller and directive works, the only NOT working part is the ng-click which I added to result template from inside the jQuery plugin. Any ideas what is the problem here?

myApp.directive("myDirective", function(){
  return{
    restrict: 'A',
    link: function(scope, element,attrs) {

        $(element).selectAutoComplete({
            dataSourceDelegate: scope.dataSource1,
            dataSourceObject: { value: "id", display: "title"},
            resultTemplate: '<div>show some data as list</div> <div id="internalTemplate"
                                ng-click="doSomething()"> Show Next </div>'
        });
    }
  }
});

and in Html

   <div ng-controller="myController">
            <input my-directive type="text" />
        </div>

Upvotes: 2

Views: 1813

Answers (1)

Michael Low
Michael Low

Reputation: 24506

For dynamically generated HTML you need to use the $compile service like $compile(element)(scope); to get it recognised by angular.

It's more difficult if the plugin is generating the HTML. In my experience most complex plugins have their own API that includes a callback or way to notify you when they're ready. I'd have a look at the plugin docs and see if there's a way to do this (or change it's source to do it yourself if not).

myApp.directive("myDirective", function($compile, $timeout){
return{
restrict: 'A',
link: function(scope, element,attrs) {

    $(element).selectAutoComplete({
        dataSourceDelegate: scope.dataSource1,
        dataSourceObject: { value: "id", display: "title"},
        resultTemplate: '<div>show some data as list</div> <div id="internalTemplate"
                            ng-click="doSomething()"> Show Next </div>'
    });

    // example of what plugin callback could be like - check their docs
    element.selectAutoComplete("finished", function() {
        $compile(element)(scope);
    });

    // if not, using $timeout is a fallback that will mostly work but not ideal
    $timeout(function() {
        // wait for plugin to complete...
        $compile(element)(scope);
    }, 2000);
}
}
});

BTW, you don't need to do $(element) as element is already a jquery object anyway.

Upvotes: 2

Related Questions