Angular dynamically include html

Question

I want to include HMTL for Bootstrap modal on click but I cannot get it to work.

In my controller I have this code:

  $scope.onFollowingClick = function () {
        console.log('clicked');
        $scope.isFollowingModal = true;
        $('#FollowingModal').modal('toggle');
    };

And my HTML looks like this:

<div ng-if="isFollowingModal">
    <div class="modal modal-alternate fade" ng-include="'/Templates/Modals/Public/ModalFollowing.html'" id="FollowingModal"> </div>
</div>

And when I click button nothing happens ("clicked" is logged in console), in browser when I inspect element, I only see:

<!-- ngIf: isFollowingModal -->

And no network request to fetch ModalFollowing.html is logged.

What am I doing wrong ?

You're trying to use a jQuery plugin inside an AngularJS controller -- it's possible, just not recommended. Try an AngularJS alternative: angular-ui.github.io/bootstrap/#/modal or mgcrea.github.io/angular-strap/#/modals. — jme11
– jme11, Commented Jun 30, 2015 at 19:23
even if request is made, you aren't accounting for asynchronous loading before trying to activate the modal. That's what directives are used for — charlietfl
– charlietfl, Commented Jun 30, 2015 at 19:28
@charlietfl what you are saying is completely true but this doesn't explain why request isn't made :/ — hyperN
– hyperN, Commented Jun 30, 2015 at 19:33
@hyperN Sorry without watch only its working check this plunker code am i getting correct your you have different problem plnkr.co/edit/n7idBSY5RKoI7UT5IzRH?p=preview — Siddharth Pandey
– Siddharth Pandey, Commented Jun 30, 2015 at 20:18

Starmetal · Accepted Answer · 2015-06-30 19:35:56Z

1

If we go this way, using $http service is really helpful even though ngInclude fetches, compiles and includes an external HTML fragment.

$scope.onButtonClick = function() {
  $http
    .get('/Templates/Modals/Public/ModalFollowing.html')
    .success(function(response) {
      $('modal')
        .html(response)
        .modal('show');
    });
}

And never forget about async :P

edited Jun 30, 2015 at 19:35

answered Jun 30, 2015 at 19:32

Starmetal

7606 silver badges14 bronze badges

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

3 Comments

hyperN Over a year ago

Thanks for the answer I'll check it when I come home :)

hyperN Over a year ago

I tried your solution, and it partially worked, HTML was injected, and modal opened but for some reason controller doesn't work (and it is called inside html)

Starmetal Over a year ago

It won't work, because you have to compile that again using $compile. Check the angular docs for that :P

Collectives™ on Stack Overflow

Angular dynamically include html

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related