从Bootstrap模态加载的远程页面调用AngularJS函数 [英] Calling AngularJS function from a remote page loaded by Bootstrap modal

问题描述

我使用Bootstrap 3模态组件加载远程表单，在其中定义Angular控制器和几个函数.但是浏览器说试图加载角度不止一次".

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".

(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>

表单页面(./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>

addType()函数无法触发.

我需要编译远程内容吗?我该怎么办?

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

以前，我在两个页面中都加载了AngularJS文件，这不是必需的.现在，我在表单页面中删除了这些文件，但是页面中的内容将无法使用.我认为它需要在加载后进行编译，所以现在:

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:

(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');
        });
    }
}

}])

但是现在错误变为:参数'saveFormController'不是一个函数，未定义

推荐答案

您无需创建两个"ng-app".

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

只有两个控制器但具有相同的ng-app，您就可以完成这项工作.

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

您能尝试这样的事情吗:(下面的代码不起作用)

Can you try something like this : ( 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 成为 manageAppCollections 应用

编辑

要使用AngularJS和Bootrap，还可以使用angular-ui，它更容易:http://angular-ui.github.io/bootstrap/#/modal

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

(来自文档)

Plunkr

(from the doc)

这篇关于从Bootstrap模态加载的远程页面调用AngularJS函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！