从 Bootstrap 模式加载的远程页面调用 AngularJS 函数

Question

我使用 Bootstrap 3 模态组件来加载一个远程表单，我在其中定义了一个 Angular 控制器和几个函数。 但是浏览器说“尝试多次加载 Angular”。

主页：

(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()函数。

我需要编译远程内容吗？ 我该怎么做？

编辑

以前我在两个页面中都加载了 AngularJS 文件，这不是必需的。 现在我删除了表单页面中的这些文件，但页面中的内容将不起作用。 我认为它需要在加载后编译，所以现在：

主页：

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

}])

但现在错误变为： Argument 'saveFormController' is not a function, got undefined

Answer 1

您不需要创建两个“ng-app”。

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

你能试试这样的吗：（编辑：下面的代码不起作用）

<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

编辑2

我编辑了我以前的代码，您可以在此处查看结果：

普朗克

（来自文档）