Get Dynamic HTML/JQuery to work with AngularJS

Question

I have a web page that uses a directive called custom-html which loads a HTML web url into the page (allowing for sub-templates etc). I have this system configured so that it registers properly with $scope but I seem to be having issues to get JQuery listeners to work with it.

For instance I have the following at the bottom of one of my templates (where the custom-html tag is used above this point)

$(function() {
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
});

The datepicker never works in the sub-templates I am including via the custom-html directive though. Does anyone have an idea on how I can remedy this? Below is the directive I am using:

backendApp.directive('customHtml', function($compile, $http){
    return {
        link: function($scope, element, attrs) {
            $http.get(attrs['url']).then(function (result) {
                element.html(result.data);
                element.replaceWith($compile(element.contents())($scope));
            });
        }
    }
});

Using JQuery 1.11.1 and AngularJS 1.2.22 at the moment. Thanks.

EDIT: My apologies, let me clarify the issue that I am having is that when i click on the .datepicker fields that are being inserted via the custom-html directive that it's not working. E.g. it's not opening up the JQuery datepicker as it should be when I click on the input field. When I do this with the regular HTML (not the custom-html) it works just fine.

tommybananas · Accepted Answer · 2014-11-19 18:47:12Z

1

The problem is that you need to run the datepicker() init AFTER the element gets compiled. So you should do it after you replace the actual html. The code you have above runs one time on page load (or wherever it is) and won't create datepickers for html elements created AFTER that point.

backendApp.directive('customHtml', function($compile, $http){
return {
    link: function($scope, element, attrs) {
        $http.get(attrs['url']).then(function (result) {
            element.html(result.data);
            element.replaceWith($compile(element.contents())($scope));
            // DO DATEPICKER INIT HERE ON NEW ELEMENT
        });
    }
}
});

The better way to do it is a datepicker directive so you know the datepicker element has been compiled before you init it (in the link function)

backendApp.directive('myDatepicker', function($compile, $http){
return {
link: function($scope, element, attrs) {
    // ONLY JOB IS INITING DATE PICKER HERE
}
}
});

edited Nov 19, 2014 at 18:47

answered Nov 19, 2014 at 18:29

tommybananas

5,7361 gold badge31 silver badges52 bronze badges

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

5 Comments

MasterGberry Over a year ago

My apologies, I clarified the problem above, I didn't make it clear enough as to what the actual problem was.

tommybananas Over a year ago

altered answer for you

MasterGberry Over a year ago

Ok this seems to have solved one spot where it wasn't working. The HTML template I am including via my custom-html tag is a accordion from AngularJS. Do you have any idea why it wouldn't be working there? I even tried adding the JQuery datepicker code at the end of each accordian-group.

tommybananas Over a year ago

The problem is that angular is probably running async code to do the directive compilation, etc. So I bet if you put the date picker init inside a timeout() (half second maybe), they should all work. Obviously this is not ideal. The best way to get around this is to create a datepicker directive whose whole job is to call the jquery datepicker init inside the linking function so whenever angular gets around to compiling that specific directive, you know the init will be fired afterward. Make sense?

MasterGberry Over a year ago

I see. So when angular is compiling the HTML I then add this extra directive into my elements which forces JQuery to initialize the stuff at the right time. Got it all working now. Thanks for the help and explanation, I have a better idea as to how this stuff should be designed now :)

Collectives™ on Stack Overflow

Get Dynamic HTML/JQuery to work with AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related