CODEWITHSUNDEEP
javascriptjqueryangularjs
Trip
Trip

Reputation: 27114

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

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.

Upvotes: 3

Views: 1337

Answers (1)

Ben Lesh
Ben Lesh

Reputation: 108481

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.

Upvotes: 5

Related Questions