I want set modal state using ui-router.I make state:
.state('adminUsers.new', {
url: '/new',
controller: 'adminUsersCtrl',
onEnter: ['$uibModal', '$state', function($uibModal, $state){
$uibModal.open({templateUrl: "administration/users/new.html"})
.result.then(
function(){
$state.go('^');
},
function(){
$state.go('adminUsers');
},
function(){
$state.go('adminUsers');
}
).finally(function(){$state.go('^')});
}]
})
when I go to adminUsers.new state, template normal loaded and showing. In template I have two buttons:
<span class="btn btn-success" ng-click="addUser()">Add user</span>
<a class="btn btn-danger" ui-sref="adminUsers" href="#/admin/users">Cancel</a>
adminUsersController
var adminUsersController = function($scope, Restangular, $stateParams, $state) {
$scope.store = Restangular.all('users');
console.log("adminUsersController");
$scope.store
.getList()
.then(
function(users){
$scope.users = users;
},
function()
{
alertify.log("Не удалось получить список пользователей");
}
)
$scope.addUser = function() {
alert('hello');
}
};
angular
.module('mofs')
.controller('adminUsersCtrl', [
'$scope',
'Restangular',
'$stateParams',
'$state',
adminUsersController
]);
when I clicked to "addUser" button I don't get alert, but when I clicked to "cancel" button modal window not closed, but in browser url changed to #/admin/users. What am i doing wrong? Thank you. full template code
<div class="modal-content" uib-modal-transclude=""><div class="row no-margin ng-scope">
<h3>
Новый пользователь
</h3>
<form class="form-horizontal ng-pristine ng-valid" id="userForm">
<div class="form-group">
<label class="col-sm-3 control-label" for="user[surname]">
Фамилия
</label>
<div class="col-sm-9">
<input class="form-control" id="user[surname]" name="user[surname]" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[name]">
Имя
</label>
<div class="col-sm-9">
<input class="form-control" id="user[name]" name="user[name]" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[patronimyc]">
Отчество
</label>
<div class="col-sm-9">
<input class="form-control" id="user[patronimyc]" name="user[patronimyc]" type="text">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[login]">
Логин
</label>
<div class="col-sm-9">
<input class="form-control" id="user[login]" name="user[login]" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[password]">
Пароль
</label>
<div class="col-sm-9">
<input class="form-control" id="user[password]" name="user[password]" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[password_confirmation]">
Подтверждение пароля
</label>
<div class="col-sm-9">
<input class="form-control" id="user[password_confirmation]" name="user[password_confirmation]" type="password">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="user[role]">
Роль
</label>
<div class="col-sm-9">
<select class="form-control" id="user[role]" name="user[role]">
<option value="1">Администратор</option>
<option value="2">Главный врач</option>
<option value="3">Врач</option>
<option value="4">Сотрудник регистратуры</option>
</select>
</div>
</div>
</form>
</div>
<div class="row no-margin ng-scope">
<div class="pull-right">
<span class="btn btn-success" ng-click="addUser()">Добавить</span>
<a class="btn btn-danger" ui-sref="adminUsers" href="#/admin/users">Отменить</a>
</div>
</div></div>
Along with teplateUrl
, you provide controller
as property.Like as fallows
$uibModal.open({
animation: true,
templateUrl: 'Your template URL',
controller: 'Your controller',
size: undefined,
resolve : {
// If you have anything to resolve
embedLink : function (){
return embedLink;
}
}
});
Inside your controller
add a method which will call on click of cancel button as fallows.
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
Don't forget to have a dependency of uibModalInstance
in you controller.
The same you can do inside the same controller on click of addUser
button.
Please refer Plunker