AngularJS $ modalInstance - 我可以做这一个控制器？ [英] AngularJS $modalInstance - Can i do this in one controller?
问题描述
我花了一些时间有与AngularJS引导弹出一出戏，并意图它的工作不错，但我希望做的是将它绑定，和它的依赖脚本到同一控制器，有什么我可以'吨得到的工作是关闭按钮现在虽然。如果我创建一个新的控制器，并注入$ modalInstance它的伟大工程，我可以wireup的关闭按钮，而根本的任何问题，但我不希望第二个控制器，它似乎是在复杂：我想我所有的控制器逻辑在表单控制器真的。
为什么会其实我是想两个控制器？经过两个控制器之间的范围只是矫枉过正在我看来，大项目变得更非可管理将成为。我岂是过度简化不必要的？ ：）
脚本：
（函数（）{
VAR应用= angular.module（'ngModalDemo'，['ui.bootstrap']）
.controller（'的FormController'，函数（$范围，$模态）{
$ scope.openModal =功能（）{
VAR modalInstance = $ modal.open（{
templateUrl：SomeModal.html'，
控制器：表单控制器
}）;
};
$ scope.closeModal =功能（）{
// code，这里需要:)
};
}）
}）（）;
HTML正文（原谅了DEMO的目的脚本的HTML）：
＆LT; DIV NG控制器=表单控制器＆GT;
＆LT;按钮类=BTN BTN-默认的NG点击=openModal（）＆GT;让我们做一些东西＆LT;！/按钮＆GT; ＆LT;脚本类型=文/ NG-模板ID =SomeModal.html＆GT;
＆LT; DIV CLASS =模头＆GT;做这一些东西你们都模态LT＆; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN BTN-INFONG点击=closeModal（）＆GT;关闭＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
＆LT; / DIV＆GT;
根据卡斯帕尔斯输入答案：）
（函数（）{
VAR应用= angular.module（'ngModalDemo'，['ui.bootstrap']）
.controller（'的FormController'，函数（$范围，$模式，$日志）{
$ scope.openModal =功能（）{
VAR modalInstance = $ modal.open（{
templateUrl：SomeModal.html'，
控制器：
'$范围，$ modalInstance'，函数（$范围，$ modalInstance）{
$ scope.closeModal =功能（）{
$ modalInstance.close（）;
};
}
]
}）;
};
}）
}）（）;
我是用了同样的问题，我想出的最好的事情挣扎是使用匿名函数作为一个模态控制器。这样一来所有的逻辑是相同的控制器，你不必为每个模式窗口创建单独的控制器。
这应该是这样的：
（函数（）{
VAR应用= angular.module（'ngModalDemo'，['ui.bootstrap']）
.controller（'的FormController'，函数（$范围，$模态）{
$ scope.openModal =功能（）{
VAR modalInstance = $ modal.open（{
templateUrl：SomeModal.html'，
控制器：
'$范围，$ modalInstance'，'数据'，函数（$范围，$ modalInstance，数据）{
$ scope.data =数据;
$ scope.ok =功能（）{
$ modalInstance.close（）;
};
$ scope.closeModal =功能（）{
$ modalInstance.dismiss（）;
};
}
]
}）;
};
}）
}）（）;
PS。没有测试code以上，只要把它一起从您提供的code和碎片从我的项目之一。
I've spent some time having a play with the AngularJS Bootstrap popup, and for intents it's working great, but what i'd like to do is bind it, and it's dependant script to the same controller, what i can't get working is the close button now though. If i create a NEW controller, and inject $modalInstance it works great and i can wireup the close button without any issues at all, but i don't want a second controller, it seems to be over complication: i want all my controller logic in the formController really.
Why would i actually want two controllers? Passing the scope between two controllers just seems overkill to me, and the larger a project becomes the more un-managable it will become. Am i trying to over-simplify this unnecessarily? :)
The script:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: 'formController'
});
};
$scope.closeModal = function () {
// Code needed here :)
};
})
})();
The HTML body (excuse the HTML in script for the purposes of the DEMO):
<div ng-controller="formController">
<button class="btn btn-default" ng-click="openModal()">Let's do some stuff!</button>
<script type="text/ng-template" id="SomeModal.html">
<div class="modal-header">Do some stuff in this modal y'all.</div>
<div class="modal-footer">
<button class="btn btn-info" ng-click="closeModal()">Close</button>
</div>
</script>
</div>
The answer based on Kaspars' input :)
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal, $log){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', function($scope, $modalInstance){
$scope.closeModal = function () {
$modalInstance.close();
};
}
]
});
};
})
})();
I was struggling with the same problem and the best thing I came up with was to use anonymous function as a modal controller. In that way all the logic is in the same controller and you don't have to create separate controller for each modal window.
This would look like this:
(function(){
var app = angular.module('ngModalDemo', ['ui.bootstrap'])
.controller('formController', function($scope, $modal){
$scope.openModal = function () {
var modalInstance = $modal.open({
templateUrl: 'SomeModal.html',
controller: [
'$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
$scope.data = data;
$scope.ok = function() {
$modalInstance.close();
};
$scope.closeModal = function() {
$modalInstance.dismiss();
};
}
]
});
};
})
})();
PS. Haven't tested code above, just put it together from your provided code and fragments from one of my projects.
这篇关于AngularJS $ modalInstance - 我可以做这一个控制器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
