Angular ui modal form not displaying form - angularjs

For studying angular js, I created an angular application for performing CRUD operation. I wanted to add modal form on my application. So when user click to add an item a modal form popups. For that I used angular ui of bootstrap. I tried to use the code http://plnkr.co/edit/dRahuG?p=preview which is in the ui bootstrap tutorial. It working fine in the plunker but not in application.
<div class="container" ng-controller="ClassController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Add</button>
<div ng-show="selected">aSelection from a modal: {{ selected }}</div>
</div>
And my controller is
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('ClassController',['$scope','$http','$modal','classFactory',function($scope,$http,$modal){
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.submit = function () {
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
items: function () {
return $scope.items;
}
}
});
};
}])
When I clicked the button the screen get darken but the modal form is not coming. I don't know where I gone wrong. I am using sails.js to load the server. Moreover I am beginner in angular js.

Related

angularjs form inside bootstrap modal popup

I have a form inside a bootstrap modal.But I can't able to get the values of form on controller side with scope variable.
https://plnkr.co/edit/FjKXUpoBDdvQqomI97ml?p=preview
My original code has another problem also. when I click on submit button it will refresh the whole page and submit function is not executing.
My form:
<div class="modal-body">
<form class="form-horizontal" name="contact" ng-submit="contactForm()">
<div class="form-group">
<label class="col-lg-3 control-label">Name* :</label>
<div class="col-lg-8">
<input class="form-control" type="text" id="name" name="_name" ng-model="_name" > </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email* :</label>
<div class="col-lg-8">
<input class="form-control" type="email" id="email" name="_email" ng-model="_email" required> </div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile* :</label>
<div class="col-lg-8 row">
<div class="col-lg-4">
<input type="text" class="form-control" ng-model="_cc" placeholder="+91" name="_cc"> </div>
<div class="col-lg-8">
<input class="form-control" type="text" ng-model="_mobile" maxlength="10" ng-pattern="/^[0-9]{5,10}$/" id="mobile" name="_mobile"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Message :</label>
<div class="col-lg-8">
<textarea class="form-control" rows="2" name="_condition" ng-model="_condition"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-7 col-lg-5">
<button type="submit" class="btn btn-primary" id="contactSubmit" >Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div></div>
</form>
</div>
Controller:
$scope.contactForm = function(){
console.log($scope._condition,$scope._name,$scope._email,$scope._cc,$scope._mobile);
};
You are opening the modal using plain jQuery approach which is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.
Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modal service and inject the $http service to have your data posted.
Here is the working plunker using angular-ui bootstrap.
PLUNKER:https://plnkr.co/edit/rjtHJl0udyE0PTMQJn6p?p=preview
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>Email address:</label>
<input type="email" ng-model="user.email" />
<label>Password</label>
<input type="password" ng-model="user.password" />
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
</html>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$http) {
$scope.user = {
email: '',
password: null,
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$http({
method: 'POST',
url: 'https://mytesturl.com/apihit',
headers: {
"Content-type": undefined
}
, data: user
}).then(function (response) {
console.log(response);
$modalInstance.dismiss('cancel');
}, function (response) {
console.log('i am in error');
$modalInstance.dismiss('cancel');
});
//$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};

Angular-ui bootstrap- how to display selected input value in a modal?

I am new in angular.js. I have to display in a modal the selected value of input, but I don't succeed.
I have the following inputs:
<form>
<input type="radio" name="toggleDiv" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
I have to open a popup dialog and display the value of the selected value.
The moodal:
<div class="row" ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ inputsVal }}
</div>
</script>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
I try the following function:
app.controller('ModalDemoCtrl', function ($scope, $uibModal) {
$scope.open = function () {
$scope.inputsValue=$('input:checked').val()
return $scope.inputsValue
}}
}
your implementation is wrong.check anguar ui bootstrap modal documentation.
You have to do like this
$scope.open = function () {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.myForm;
}
}
});
in your controller,
app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
in html,
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
{{ items.input}}
</div>
</script>
<form>
<input type="radio" name="toggleDiv" ng-model="myForm.input" value="show" ng-click="show()" checked/> Show Text
<br>
<input type="radio" name="toggleDiv" ng-click="hide()" value="hide"/> Hide Text
</form>
edit
If you want to work with jquery way then you need to use $apply()
$scope.$apply(function () {
$scope.inputsValue=$('input:checked').val();
});
hope this helps .. :)

Why I cant open another modal window in Ionic

I want to open another modal window when to click on link in first modal window.
When click on Forgot password I want to open another modal window forgotpassword.html
I tried to solve using modal JS.
Here is code:
IONIC html
<ion-modal-view>
<ion-header-bar>
<h1 class="title">Login</h1>
<div class="buttons">
<button class="button button-clear" ng-click="closeLogin()"> <i class="icon ion-close-round"></i></button>
</div>
</ion-header-bar>
<ion-content>
<form ng-submit="doLogin()">
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" ng-model="loginData.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password">
</label>
<label class="item borderbottomnone">
<button class="button button-block button-positive" type="submit">Log in</button>
<span class="loginforgotpassword"><a ng-controller='MainCtrl' ng-click="openModal()">>Forgot password</a></span>
<span class="loginregister">REGISTER</span>
</label>
</div>
</form>
</ion-content>
</ion-modal-view>
JS
app.controller('MainCtrl', function($scope, $ionicModal) {
$scope.contact = {
name: 'Mittens Cat',
info: 'Tap anywhere on the card to open the modal'
}
$ionicModal.fromTemplateUrl('forgotpassword.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal
})
$scope.openModal = function() {
$scope.modal.show()
}
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
})
Chances are that your modal object is overriden by parent modal object, so change modal object name like this
$ionicModal.fromTemplateUrl('forgotpassword.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.forgotPasswordModal = modal
})
$scope.openModal = function() {
$scope.forgotPasswordModal.show()
}
$scope.closeModal = function() {
$scope.forgotPasswordModal.hide();
};

Angular js scope between directive and controllers

I have to show user login page in pop up and have to validate user name and password with the server by using angular js. I create one app model file, and one controller, service and one directive. My code looks like bellow,
app.js
angular.module('mint', ['ngAnimate', 'toastr']);
mycontroller.js
angular.module('mint').controller(
'headercontroller',
[
'$scope',
'headerservice',
'toastr',
function($scope, headerservice, toastr) {
$scope.showModal = false;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
$scope.userSignin = function(){
$scope.userloginbtn = false;
if($scope.signin_form.$valid){ //Error on this line signin_form is undefine. using $valid for undefine
var record = {};
angular.extend(record, $scope.signinForm);
console.log(record);
}else {
$scope.signin_form.submitted = false;
$scope.userloginbtn = true;
}
};
} ]);
my directive.js file is
angular
.module('mint')
.directive(
'modal',
function() {
return {
template : '<div class="modal fade">'
+ '<div class="modal-dialog">'
+ '<div class="modal-content">'
+ '<div class="modal-header">'
+ '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
+ '<h4 class="modal-title"><span><i class="fa fa-user"></i> {{ title }}</span></h4>'
+ '</div>'
+ '<div class="modal-body" ng-transclude></div>'
+ '</div>' + '</div>' + '</div>',
restrict : 'E',
transclude : true,
replace : true,
scope : true,
link : function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
My html file looks like
<!DOCTYPE html>
<html lang="en" ng-app="mintmygold">
<body>
<div class="container-fluid ban_bg"
ng-controller="headercontroller">
<div class="but_bg">
<button type="button" class="btn btn-default btn_sin" ng-click="toggleModal()">
<span><i class="fa fa-key"></i> Sign In</span>
</button>
</div>
<modal title="Login" visible="showModal">
<form role="form" name="signin_form" class="signup_form" novalidate
ng-model="signin_form">
<div class="form-group">
<p class="infoMsg" ng-model="signinform_info">Please fill in your login credentials:</p>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input ng-model="signinForm.userEmail" name="userEmail" type="email" class="form-control" id="email" placeholder="Enter email" required />
<div
ng-show="signin_form.$submitted || signin_form.userEmail.$touched">
<span ng-show="signin_form.userEmail.$error.required">Enter your
email.</span> <span ng-show="signin_form.userEmail.$error.email">This
is not a valid email.</span>
</div>
</div>
<div class="form-group">
<label for="password">Password</label>
<input ng-model="signinForm.userPassword" name="userPassword" type="password" class="form-control" id="password" placeholder="Password" required />
<div
ng-show="signin_form.$submitted || signin_form.userPassword.$touched">
<span ng-show="signin_form.userPassword.$error.required">Enter your
password.</span>
</div>
</div>
<button ng-disabled="signin_form.$invalid || !userloginbtn" ng-model="signin" ng-click="userSignin()" type="submit" class="btn btn-primary">Submit</button>
</form>
</modal>
</div></body></html>
Now i can show the popup when click on sign in button. When i submit the form i couldn't get the values of email and password values from the pop up form in controller. what is my mistake of using the scope. Please any one help me.
With a quick overlook, it seems a silly mistake. Change your lines
From
angular.module('mint', ['ngAnimate', 'toastr']);
To
angular.module('mintmygold', ['ngAnimate', 'toastr']);
You are using scope: true which means your directive is creating a child scope and inheriting the properties from its parent.
Therefore any property you define in the directive scope does not exists on you controller scope.
Changing form name=signin_form
for form name=$parent.signin_form or scope: false should fix the problem
I didn't test this though. And it's not a good solution.
I would probably create a service that launches the pop-up and returns a promise that gets resolved/rejected accordingly.
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, modal) {
$scope.launch = function(){
modal.show().then(function(user){
console.log(user)
}, function(err){
console.log(err)
});
}
});
app.factory('modal', ["$document", "$compile", "$rootScope", "$templateCache", "$timeout", "$q",
function ($document, $compile, $rootScope, $templateCache, $timeout, $q) {
var $body = $document.find('body');
return {
show: function(){
var defer = $q.defer(),
child = $rootScope.$new();
child.user = {};
child.close = function(){
defer.reject('canceled');
tpl.remove();
}
child.submit = function(){
defer.resolve(child.user);
tpl.remove();
}
var tpl = angular.element($templateCache.get('modal.html'));
$compile(tpl)(child);
$body.append(tpl);
return defer.promise;
}
};
}]);
index.html
<script type="text/ng-template" id="modal.html">
<div class="modal in" style="position: static; display: block">
<div class="modal-dialog">
<form ng-submit="submit()" class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
Email: <input ng-model="user.email"></input><br>
Password: <input ng-model="user.password"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()">Close</button>
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</form>
</div>
</div>
</script>
<button type="button" ng-click="launch()" class="btn btn-primary">Show modal</button>
Plunker
This is just a proof of concept. I think is enough to get you started. I'd strongly recommend to checkout UI Bootstrap and the way the implement their modal

what is happening to my angular scope?

I am using angularstrap modal service to open a login modal on any page when login is required. I open one like this:
var scope = {'foo': 'bar'};
var myOtherModal = $modal({scope: scope, template: 'modal/login.html', show: false});
the login.html contains the modal markup but it also has a controller bound to it:
<div ng-controller="SignInController" class="modal" tabindex="-1" role="dialog">
<input ng-modal="foo"/>
In the controller code, how do I get access to the foo prop on the scope that I am passing in?
What is happening to my scope? Is a scope object created by $modal the one and the same that is used by the controller? It appears that its not the case.
What is the best way to solve this problem? (Ability to open a login dialog from anywhere and have control over its scope from the controller)
Thanks
Think of opening a modal as a function call... where you pass data in and get data back. It's not the ONLY way to approach it but I think it's a clean way to approach it.
I generally follow this pattern, giving the modal it's own controller & passing data in & getting data back by passing it into the promise:
var ModalController = function($scope, $modalInstance, input) {
$scope.input = input;
var output = {
username: "",
password: ""
};
$scope.ok = function () {
$modalInstance.close($scope.output);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
$scope.openModal = function(data) {
var modalInstance = $modal.open({
templateUrl: 'popupDialog.tpl.html',
controller: ['$scope', '$modalInstance', 'input', ModalController],
resolve: {
input: function() {
return data;
}
}
});
modalInstance.result.then(function(output) {
// TODO: do something with the output.username & output.password...
// call Login Service, etc.
});
};
EDIT: Adding popup html...
<form class="form-horizontal">
<div class="modal-header">
<h3>Please Log In</h3>
</div>
<div class="modal-body">
<form name="form" class="form-horizontal">
<div class="row">
<label class="col-sm-3 text-info control-label" for="inputUsername">Username</label>
<input class="col-sm-8 form-control input-sm" type="text" id="inputUsername" name="inputUsername" ng-model="output.username" />
</div>
<div class="row">
<label class="col-sm-3 text-info control-label" for="inputPassword">Password</label>
<input class="col-sm-8 form-control input-sm" type="text" id="inputPassword" name="inputPassword" ng-model="output.password" />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-primary" type="submit" ng-click="ok()">Ok</button>
<button class="btn btn-sm btn-warning" ng-click="cancel()">Cancel</button>
</div>
</form>

Resources