AngularJS $ modalInstance - Posso fazer isso em um controlador?
Passei algum tempo brincando com o pop-up AngularJS Bootstrap e, por intenções, está funcionando muito bem, mas o que eu gostaria de fazer é vinculá-lo, e é um script dependente do mesmo controlador, o que não consigo trabalhar é o botão Fechar agora. Se eu criar um novo controlador e injetar $ modalInstance, ele funciona muito bem e eu posso conectar o botão Fechar sem nenhum problema, mas eu não quero um segundo controlador, parece haver muita complicação: quero toda a lógica do meu controlador no formController realmente.
Por que eu realmente iria querer dois controladores? Passar o escopo entre dois controladores parece um exagero para mim, e quanto maior um projeto se tornar, mais incontrolável se tornará. Estou tentando simplificar demais desnecessariamente? :)
O 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 :)
};
})
})();
O corpo do HTML (desculpe o HTML no script para os fins da 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>
A resposta com base na entrada da Kaspars :)
(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();
};
}
]
});
};
})
})();