modalLoginController.js
angular.module('App')
.controller('modalLoginController', function ($modal, $scope, loginService) {
$scope.userName = null;
$scope.userPassword = null;
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'modalLogin.html',
controller: ModalInstanceCtrl,
size: size,
resolve: {
loginDto: function() {
var login = {};
login.userName = $scope.userName;
login.userPassword = $scope.userPassword;
return login;
}
}
});
};
var ModalInstanceCtrl = function ($scope, $modalInstance, $window, loginDto) {
$scope.ok = function () {
var login = {};
login.userName = $scope.userName;
login.userPassword = $scope.userPassword;
$window.alert(login.userName + ' ' + login.userPassword);
var response = loginService.validateLogin(loginDto);
if (response.success) {
$modalInstance.close();
} else {
$window.alert('zebrero');
}
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
});
Index.html
...
...
...
<script type="text/ng-template" id="modalLogin.html">
<div class="modal-header">
<h3 class="modal-title">Login</h3>
</div>
<div class="modal-body">
<input type="text" ng-model="userName" placeholder="user"/>
<input type="password" ng-model="userPassword" placeholder="password"/>
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="ok()">Login</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
<div class="modal-body" ng-show="isLogged">
<label>Usuário Logado</label>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
...
...
...
<div id="loginLogout" ng-controller="modalLoginController">
<button class="btn btn-default" ng-click="open('sm')" modalLogin ng-show="!isLogged" >Login</button>
</div>
...
...
...
Why I can't get the $scope.userName and $scope.userPassword defined in ModalInstanceCtrl, even though I can use $scope.ok and $scope.cancel?
Just for text I put $scope.userName and $scope.userPassword in resolve as loginDto, but doesn't work too.
The modal controller has it's own scope. You haven't defined $scope.username within it.
You need to access these from the loginDto object that you injected.
Try:
$scope.userName = loginDto.userName;
Related
I have a problem with AngularJS Controller "as" syntax. I am trying to use bootstrap nanomodals and attach to them controllers $scope.
For now, I create angular component for my modal. I create my dialog in html too.
My html code:
<body ng-app="application">
<div ng-controller="accountController as $acc" class="controller-account">
<script type="text/ng-template" id="loginModal.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Nowe konto</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="userNameInput">Nazwa użytkownika:</label>
<input type="text" class="form-control" id="userNameInput" placeholder="Wprowadź nazwę użytkownika">
</div>
<div class="form-group">
<label for="userPasswordInput">Hasło:</label>
<input type="password" class="form-control" id="userPasswordInput" placeholder="Password">
</div>
<div class="form-group">
<label for="userEmailInput">E-Mail:</label>
<input type="email" class="form-control" id="userEmailInput" placeholder="Wprowadź E-mail">
</div>
<button ng-click="$acc.okButton()" class="btn btn-primary">Załóż konto</button>
</form>
</div>
</script>
My JS script:
var angularApp = angular.module('application', ['ngAnimate', 'ngSanitize', 'ngCookies', 'ui.bootstrap']);
angularApp.component('loginModalComponent', {
templateUrl: 'loginModal.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: () => {
var $acc = this;
$acc.$onInit = () => {
};
$acc.okButton = () => {
console.log('Liiiii');
//HTTP request about login
};
$acc.closeButton = () => {
$acc.close();
}
}
});
angularApp.controller('accountController', ['$scope', '$http', '$cookies', '$uibModal',
function($scope, $http, $cookies, $uibModal){
var $acc = this;
$acc.isUserSignIn = false;
$acc.loginModalOpen = () => {
var modalInstance = $uibModal.open({
animation: true,
component: 'loginModalComponent',
resolve: {
}
});
};
}]);
I dont know why, but i cannot use in this example $acc.okButton() function.
I used this and this to resolve this problem, but i cannot do this. Something is bad here, but i dont know what.
You declared a component, but I can not see it in your html code.
So firstly you need to take the html of the modal and place it to file 'loginModal.html' and remove 'ng-controller' directive from it. So the code in that file should be like this:
Seems that you need to replace this:
<div ng-controller="accountController as $acc" class="controller-account">
with this:
<login-modal-component class="controller-account" />
In such case it will use your controller described in component declaration.
But also you will add controllerAs: '$acc' to your component, because by default it uses $ctrl.
So you also need to slightly change code like this:
angularApp.component('loginModalComponent', {
templateUrl: 'loginModal.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: () => {
var $acc = this;
$acc.$onInit = () => {
};
$acc.okButton = () => {
console.log('Liiiii');
};
$acc.closeButton = () => {
$acc.close();
}
},
controllerAs: '$acc' // ADD THIS LINE
});
The data is to update in the UI in the model. But I keep getting empty in the database. I have set
$scope.user = userData;
Please help.
Here's my controller
var contactModule = angular.module('test.contact', ['ngRoute','firebase','angularModalService'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/contacts', {
templateUrl: 'contact/contacts.html',
controller: 'ContactCtrl'
});
}])
.controller('ContactCtrl', ["$scope","$firebase","$firebaseArray", "$firebaseObject","ModalService", "fireBaseService",function($scope, $firebase, $firebaseArray, $firebaseObject, ModalService, fireBaseService ) {
$scope.contacts = fireBaseService.getContacts();
$scope.showAddForm = function () {
$scope.addFormShow = true;
};
$scope.user = fireBaseService.getUser(null);
$scope.showView = function(contact) {
var userData = fireBaseService.getUser(contact.$id);
userData.$loaded().then(function () {
});
ModalService.showModal({
templateUrl: 'Modals/modal.html',
controller: "ModalController"
})
.then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
//Modal is closed now.
});
});
};
}])
.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
testContactsApplication.factory('fireBaseService',["$q","$firebase","$firebaseArray", "$firebaseObject",function($q, $firebase, $firebaseArray, $firebaseObject) {
var list = [];
var rootRef = firebase.database().ref();
var dataObjectArray = $firebaseObject(rootRef);
var contactRef = firebase.database().ref().child("contacts");
return {
getContacts: getContacts,
getUser: getUser
};
function getUser(userID) {
if(userID===null)
{
return null;
}
else {
var user = contactRef.child(userID);
var userData = $firebaseObject(user);
return userData;
}
}
function getContacts() {
list = $firebaseArray(rootRef.child('contacts'));
return list;
}
}])
;
My view:
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close(false)" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{user.name}}</h4>
</div>
<div class="modal-body">
<div class="container-fluid span6">
<div class="row-fluid">
<div class="col-md-4" >
<img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" class="img-circle">
</div>
<div class="col-md-8">
<h3>{{user.name}}</h3>
<h6>Email: {{user.email}}</h6>
<h6>Status: {{user.status | capitalize}}</h6>
<h6>Type: {{user.type}}</h6>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close(false)" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I am using angularjs. I am trying to send parameters and object into the popup.
Click here:
Html code:
<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>
<div class="container" ng-app="app" ng-controller="Controller">
<h3>Angular Modal Service</h3>
<a class="btn btn-default" href ng-click="show()">Show a Modal</a>
<p>{{message}}</p>
<!-- The actual modal template, just a bit o bootstrap -->
<script type="text/ng-template" id="modal.html">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Yes ossssssssr No?</h4>
</div>
<div class="modal-body">
<p>It's your call...</p>
</div>
<div class="modal-footer">
<button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
</script>
</div>
Js Code:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, ModalService) {
$scope.url = 'google.com';
var obj= {};
obj.name = "test"
$scope.data = obj;
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = "You said " + result;
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
How to pass the scope url and data values into the popup.
I saw few example to pass using resolve.
Please check my example
try this:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () {
return $scope.data
}
}
})
in model controller you can get data like
app.controller('ModalController', function($scope, close, data) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
});
Call broadcast with data to Your modal, and catch event:
var app = angular.module('app', ['angularModalService']);
app.controller('Controller', function($scope, $rootScope, ModalService) {
$scope.url = 'google.com';
var obj= {};
obj.name = "test"
$scope.data = obj;
$scope.show = function() {
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$rootScope.$broadcast('ModalController:set', {message: "You said " + result});
});
});
};
});
app.controller('ModalController', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
$scope.$on('ModalController:set', function(event, data) {
for(var i in data) {
$scope[i] = data[i];
}
});
});
"showModal" has a property with name "resolve".It lets you to share (pass) parameters to the controller.For example:
ModalService.showModal({
templateUrl: 'modal.html',
controller: "ModalController",
resolve : {
data: function () { // ro you can pass a value in stead of function
return $scope.data
}
}
})
And in controller you can inject it like services or use it with scope like scope.data
I'm creating a simple update modal. To do so, I'm passing a parameter into my angular-bootstrap modal. I've two controllers, ModalCtrl and ModalInstanceCtrl:
adminController.controller('ModalCtrl', ['$scope', '$modal', '$log', 'Profile',
function ($scope, $modal, $log, Profile) {
$scope.open = function (profile) {
var modalInstance = $modal.open({
animation: true,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
profile: function () {
$log.info(profile);
return profile;
}
}
});
modalInstance.result.then(function (updatedProfile) {
$log.info(updatedProfile);
Profile.post(updatedProfile);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
adminController.controller('ModalInstanceCtrl', function ($scope, $modalInstance, profile) {
$scope.ok = function () {
$modalInstance.close(profile);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
The profile is logged both when opening and accepting the modal - leading me to believe that it's being passed into the instance without issue. However, displaying the modal doesn't display anything from that profile object:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Profile View</h3>
</div>
<div class="modal-body">
<div><p>{{profile.profileType}}</p></div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
What am I doing wrong?
You need to put the profile object on the $scope for it to be accessible in the HTML template:
adminController.controller('ModalInstanceCtrl', function ($scope, $modalInstance, profile) {
$scope.profile = profile;
$scope.ok = function () {
$modalInstance.close(profile);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
I have html file
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
and js
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
How to keep changes when I click cancel button and reopen window.
Link to example http://angular-ui.github.io/bootstrap/#/modal
This works? You can pass items through the $modalInstance.close();
(Plunkr: http://plnkr.co/edit/Lbwz5K3Wg8ivp9tBK7Bb?p=preview)
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
items: function () {
return $scope.items;
},
selectedItem : function() {
return $scope.selected;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function (selectedItem) {
$scope.selected = selectedItem;
$log.info('Modal dismissed at: ' + new Date());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items,selectedItem) {
$scope.items = items;
$scope.selected = {
item: selectedItem || $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss($scope.selected.item);
};
};