After loading an AngularJS Controller via AJAX, it does not work

Question

How do I instantiate the Controller so that its methods may work?

I am loading via AJAX a SettingsController, but once it is loaded, its methods are not callable.

What do I have to do to instantiate this code?

I looked at $compile, but that doesn't seem to work.

Standard way of using twitter bootstrap to load partial

$("#modal").modal({remote: 'partials/users/settings.html'})

The partial that is loaded :

%div{'ng-controller' => 'SettingsController'}
   = form_tag '', 'ng-submit' => 'update_settings($event)', :method => :post do |f|

In my SettingsController :

$scope.update_settings = ($event) ->
  alert 'hey'

Doesn't do anything.

You have the strangest questions about Angular, lol. Out of curiosity, why are you attempting this? — Ben Lesh
– Ben Lesh, Commented Feb 7, 2013 at 19:53
Haha sorry, I guess I coded myself stupid again. Its a settings modal that I loaded. But when I load it it doesn't work. — Trip
– Trip, Commented Feb 7, 2013 at 19:56
+1 for "coded myself stupid". I'll remember that for next time I'm in the same state. — Beetroot-Beetroot
– Beetroot-Beetroot, Commented Feb 7, 2013 at 19:58
That makes more sense... You made it sound like you were trying to download a string of JavaScript and register it as a controller... which would be damn near impossible outside of the configuration phase. — Ben Lesh
– Ben Lesh, Commented Feb 7, 2013 at 20:12

Ben Lesh · Accepted Answer · 2013-02-07 20:37:14Z

5

Okay it looks like the issue here is you want to dynamically load some HTML into a modal. I'm not sure what you're using for your modal plugin, but you're going to need to do something like this:

<div id="myModal" ng-include="source"></div>

Where source is a property on your $scope:

$scope.source = 'test.html';

You could then listen for the event $includeContentLoaded in your directive, and call your modal function:

scope.$on('$includeContentLoaded', function () {
    $('#myModal').modal();
});

Have angular handle pulling down the partial you want to include... then open it with your modal.

edited Feb 7, 2013 at 20:37

answered Feb 7, 2013 at 20:11

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

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

4 Comments

Trip Over a year ago

This doesn't look reusable though. How would you make it so that you could dynamically load content into a single div that could represent all modals?

pkozlowski.opensource Over a year ago

Another, native AngularJS alternative (without including jQuery) is to use the $dialog service from angular-ui.github.com/bootstrap

Ben Lesh Over a year ago

@Trip: To dynamically load the content, you would change the value you're passing into ng-include. I've updated my answer a bit, have a look.

Ben Lesh Over a year ago

There are 1000 ways to skin this cat, but the crux of it is that you should probably be letting ng-include handle loading the partial for you.

Collectives™ on Stack Overflow

After loading an AngularJS Controller via AJAX, it does not work

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related