[英]Calling AngularJS function from a remote page loaded by Bootstrap modal
I use Bootstrap 3 modal component to load a remote form, in which I define an Angular controller and several functions.我使用 Bootstrap 3 模态组件来加载一个远程表单,我在其中定义了一个 Angular 控制器和几个函数。 But the browser said "Tried to Load Angular More Than Once".但是浏览器说“尝试多次加载 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>
<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.无法触发addType()
函数。
Do I need to compile the remote content?我需要编译远程内容吗? And how can I do that?我该怎么做?
Previously I loaded AngularJS files in both pages, which was not necessary.以前我在两个页面中都加载了 AngularJS 文件,这不是必需的。 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');
});
}
}
}]) }])
But now the error becomes: Argument 'saveFormController' is not a function, got undefined
但现在错误变为: Argument 'saveFormController' is not a function, got undefined
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.只有两个控制器但使用相同的 ng-app,您就可以完成这项工作。
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 saveFormController成为manageAppCollections应用程序的控制器
EDIT编辑
To work with AngularJS and Bootrap, you could also use angular-ui, it's easier : http://angular-ui.github.io/bootstrap/#/modal要使用 AngularJS 和 Bootrap,您还可以使用 angular-ui,它更容易: http ://angular-ui.github.io/bootstrap/#/modal
EDIT2编辑2
I edited my previous code, you can check the result here :我编辑了我以前的代码,您可以在此处查看结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.