Calling AngularJS function from a remote page loaded by Bootstrap modal

Question

I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions. But the browser said "Tried to Load Angular More Than Once".

Main page:

(omitted: ng-app="manageAppCollections", ng-controller="manageAppController")

<button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button>

<div id="saveModal" class="modal inmodal fade" aria-hidden="true" role="dialog" tabindex="-1" refresh-modal>
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

Form page(./appConfForm):

<div ng-app="saveForm" ng-controller="saveFormController">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
        </button>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" name="eventEditForm">
            (omitted form content)
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
        <button class="btn btn-primary" type="button" ng-click='addApp()'>Submit</button>
    </div>
</div>
<script>
    angular.module('saveForm',[]).controller('saveFormController', ['$scope, $http', function($scope, $http) {
        $scope.addApp = function(){
            console.log("Added!");
        }
    }])
</script>

The addType() function cannot be triggered.

Do I need to compile the remote content? And how can I do that?

Edit

Previously I loaded AngularJS files in both pages, which was not necessary. Now I remove those files in the form page, but the content in the page won't work. I assume it needs compiling after loaded, so now:

Main page:

(omitted: ng-app="manageAppCollections", ng-controller="manageAppController")

<button type="button" class="btn btn-success" ng-href="./appConfForm" data-toggle="modal" data-target="#saveModal">Add an App</button>

<div id="saveModal" class="modal inmodal fade" aria-hidden="true" role="dialog" tabindex="-1" refresh-modal>
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

<script>
angular.module('manageAppCollections').directive("refreshModal", ['$compile', function($compile) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        element.on('loaded.bs.modal', function(e) {
            $compile(element.contents())(scope);
        }).on('hidden.bs.modal', function (e) {
            element.removeData('bs.modal');
        });
    }
}

}])

But now the error becomes: Argument 'saveFormController' is not a function, got undefined

eroak · Accepted Answer · 2015-06-15 07:58:14Z

1

You don't need to create two 'ng-app'.

With only two controllers but with the same ng-app, you can do the job.

Can you try something like this : (EDIT: the code bellow doesn't works)

<div ng-controller="saveFormController">
    <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button">
            <span aria-hidden="true">×</span>
            <span class="sr-only">Close</span>
        </button>
    </div>
    <div class="modal-body">
        <form class="form-horizontal" name="eventEditForm">
            (omitted form content)
        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button>
        <button class="btn btn-primary" type="button" ng-click='addApp()'>Submit</button>
    </div>
</div>

angular.module('manageAppCollections').controller('saveFormController', ['$scope, $http', function($scope, $http) {
    $scope.addApp = function(){
      console.log("Added!");
    }
}])

saveFormController becomes a controller of the manageAppCollections app

EDIT

To work with AngularJS and Bootrap, you could also use angular-ui, it's easier : http://angular-ui.github.io/bootstrap/#/modal

EDIT2

I edited my previous code, you can check the result here :

Plunkr

(from the doc)

edited Jun 15, 2015 at 7:58

answered Jun 15, 2015 at 7:22

eroak

1,04510 silver badges18 bronze badges

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

5 Comments

Melkor Over a year ago

Still, WARNING: Tried to load angular more than once.

Melkor Over a year ago

Do I need to load angularjs files in that form page? I currently load angularjs files in both pages. But if I didn't load those files in the form page, the loaded content cannot work. It seems that I need to compile it first...

eroak Over a year ago

This is not really a 'new' page, this is only the template of your modal wich is loaded from the main page (who contains the angular lib)

eroak Over a year ago

Did some edits too on my plunkr, can you check and tell me if it's good for you ? :)

Melkor Over a year ago

Thanks so much it works, but one frustrating thing is that the project doesn't use 'ui.bootstrap' for some reasons. I ended up moving the controller in the form page to the main page and it somehow worked. Thanks again!

Collectives™ on Stack Overflow

Calling AngularJS function from a remote page loaded by Bootstrap modal

Main page:

Form page(./appConfForm):

Edit

Main page:

1 Answer 1

Plunkr

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Main page:

Form page(./appConfForm):

Edit

Main page:

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related