My angularjs bootstrap modal is not opening.
var app=angular.module('test', ['ui.bootstrap']);
app.controller('ModalDemoCtrl', function($scope, $log,$modal) {
$scope.user = {
user: 'name',
password: null,
notes: 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);
$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
});
<html ng-app="test">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<!--<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="http://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>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes"></textarea>
</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 me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
If I use the bootstrap version 0.6.0 the modal working fine.But If I use version 2.5.0 it gives me the error "Unknown provider: $modalProvider <- $modal". But I have to use version 2.5.0.How to solve the problem? Please help.Thanks in advanced.
In js part:
plunker here.
Make these two files in separate folder, and make sure js is loaded correctly.
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: 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);
$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
};
IN HTML:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.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>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</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 me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
Related
Please refer my Plunker link :
http://plnkr.co/edit/0vOjw0?p=preview
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="angular.min.js?version=1.4.2"></script>
<script src="ui-bootstrap.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="col-lg-2" style="margin-right: 7px;float: left;">
<button ng-controller="registrationCtrl" type="button" class="btn btn-primary btn-responsive" ng-click="openRegistration()"> Registration</button>
</div>
</body>
</html>
registration.html
<div class="modal-dialog" id="registration.html">
<div class="modal-body">
<form name="form" class="css-form" novalidate>
<label for="pw1">Password:</label>
<input type="password" id="pw1" name="pw1" ng-model="user.pw1" ng-required="" />
<div>{{user.pw1}}</div>
</form>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
script.js
angular.module('app',['ui.bootstrap']).controller('registrationCtrl', ['$scope','$modal',function ($scope, $modal)
{
$scope.openRegistration = function ()
{
//console.log("inside openLogin");
var modalInstance =$modal.open(
{
templateUrl: 'registration.html',
controller: 'registrationPopupController',
backdrop: 'static',
keyboard: false,
size: 'sm'
});
//console.log("done open")
}
}]).controller('registrationPopupController', ['$location','$scope','$modalInstance',function ($location,$scope,$modalInstance,LoginService)
{
$scope.user={
pwd1:''
};
$scope.$watch('user.pwd1',function(newV,oldV){
if(newV!=oldV){
alert(newV)
console.log(newV,oldV);
}
},true);
$scope.cancel = function ()
{
$modalInstance.dismiss('cancel');
location.href='#/';
};
}]);
The problem i am facing is when write in password text box, my $watch will not invoke in modal instance controller. but then when i write in same simple controller it will work, please help me out!!
Its a typo in your ng-model value, it should be user.pwd1 instead of user.pw1
Markup
<input type="password" id="pwd1" name="pw1" ng-model="user.pw1" ng-required="" />
Working Plunkr
INDEX.HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="module in validation.modules">Title:{{module.title}}
description:{{module.description}}</div>
<div>
<form name="myForm" novalidate class="simple-form">
Title: <input value="" type="text" placeholder="a" ng-model="itemAmount"><br />
description: <input value="" type="text" placeholder="Name of Item" ng-model="itemName">
<br />
<button ng-click="addItem()">Add to list</button>
</form>
</div>
</body>
</html>
APP.JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.validation = {
"modules":
[
{
"title":"name of validation1",
"description":"description of validation1"
},
{
"title":"name of validation2",
"description":"description of validation2"
}
]
};
$scope.addItem = function () {
$scope.validation.modules.push({
title: $scope.itemAmount,
description: $scope.itemName
});
};
});
The below file is a pluknr in which i am just binding using ng-model to display
http://plnkr.co/edit/5NXHQiOApzNU5cn0yQT2
My Question is that you can see in the plunker file that there is a add to list button .. what i want to do is that i want to add a pop up tab like the one you can see in the MODAL section in the below link
https://angular-ui.github.io/bootstrap/
and add some text fields to it let's suppose a form and when i click add to list in the pop up form i want it to be added in the view..
Here you go
http://plnkr.co/edit/nI6PhjbAKEdTgXeWMKDx?p=preview
Opening the modal in main controller and handling the result from modal:
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl : 'myModal.html',
controller: 'myModalController'
})
modalInstance.result.then(function(info) {
console.log(info);
$scope.validation.modules.push(info);
})
Binding data into modal controller:
app.controller('myModalController', function($scope, $modalInstance) {
$scope.infoToAdd = {
title: "",
description: ""
}
$scope.addItem = function() {
$modalInstance.close($scope.infoToAdd);
}
$scope.cancel = function() {
$modalInstance.dismiss("cancel");
}
});
Template:
<script type="text/ng-template" id="myModal.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Title: <input type="text" placeholder="Title" ng-model="infoToAdd.title"><br />
description: <input type="text" placeholder="Description" ng-model="infoToAdd.description">
<br />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addItem()">Add to list</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
Repository for Project
here is the repository to see what i have done so far. I got the clock and modal to combine nicely however the popup for the modal seems to be layered behind the modal itself. I know that jquery and angular don't play nice together. However i have gotten an older version of this to work with a modal however i need to use the newest version because the callbacks have information that i need. If anyone has suggestions i would really appreciate it! Thankyou!
Here are some code snip its from the repository
index.html inside the folder specified clockpicker-gh-pages:
<html>
<head>
<title>ClockPicker</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/github.min.css">
</head>
<body ng-app="mymodal">
<div ng-controller="MainCtrl" class="container">
<button ng-click="toggleModal('Success')" class="btn btn-default">Success</button>
<button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button>
<button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button>
<button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button>
<modal visible="showModal">
<div class="input-group clockpicker">
<input type="text" class="form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
<script type="text/javascript" class="ng-scope">$('.clockpicker').clockpicker();</script>
</modal>
</div>
<script src="../Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
and from this folder there is a modal app.js script that contains:
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.buttonClicked = "";
$scope.toggleModal = function (btnClicked) {
$scope.buttonClicked = btnClicked;
$scope.showModal = !$scope.showModal;
};
});
mymodal.directive('modal', function () {
return {
templateUrl: 'userOptionsModal.html',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
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;
});
});
}
};
});
also to format the modal window the html file that is specified as User options modal is the template for the modal window.
<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">{{ buttonClicked }} Hello world!</h4>
</div>
<div class="modal-body" ng-transclude>
</div>
</div>
</div>
</div>
please keep in mind most of the code that is listed here is within the folder labeled clockpicker-gh-pages. If this helps let me know!
In angular's directive documentation, it says the element passed into the link function for a directive is a "jqLite-wrapped element".
So in your example, it appears to me that the line of code $(element).on( ... ) should be element.on( ... ).
EDIT: I didn't see the $(element).modal( ... ) lines. Though I've never used modal before I believe that should be modified in the same way.
The other option would be to put an id on your angular directive template, and access it like this.
$('#myelementid').modal( ... ) and $('#myelementid').on( ... )
I'm try to add a modal box in my angular app and for a obscure reason, my controller is undefined. My other controllers are working well so I don't know what i'm doing wrong.
declaration:
<!doctype html>
<html lang="en" ng-app="edisoncatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/main.min.css">
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/animations/animations.js"></script>
<script src="js/controllers/module-modal.js"></script>
<script src="js/controllers/module-detail.js"></script>
<script src="js/controllers/module-list.js"></script>
<script src="js/directives/directives.js"></script>
<script src="js/filters/filters.js"></script>
<script src="js/services/services.js"></script>
</head>
my html:
<div ng-controller="ModuleModalCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</modal>
app module declaration:
var edisoncatApp = angular.module('edisoncatApp', [
'ngRoute',
'edisoncatAnimations',
'edisoncatControllers',
'edisoncatFilters',
'edisoncatServices',
'edisoncatDirectives'
]);
my controller:
angular.module('edisoncatControllers', []).controller('ModuleModalCtrl', ['$scope',
function($scope) {
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
}]);
my directive:
var edisoncatDirectives = angular.module('edisoncatDirectives', []);
edisoncatDirectives.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">{{ title }}</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;
});
});
}
};
});
I always get:
Error: [ng:areq] Argument 'ModuleModalCtrl' is not a function, got undefined
My other controllers are working well so I don't understand.
You are basically defining controller as part of edisoncatControllers app.
Change the controller definition to below:
edisoncatApp.controller('ModuleModalCtrl', ['$scope',
function($scope) {
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
}]);
In addition to this, the HTML seems broken too. div tag with class=container needs to close.
<div ng-controller="ModuleModalCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
</div>
hi I was trying to do a log-in form in angular but i don't know where to start, any help or maybe reference would be appreciated
i tried to type a function that checks username and pass but i can't redirect it to another page
any help please?????????????
here is my html code
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="loginform">
<ion-pane ng-controller="AppCtrl">
<ion-header-bar class="bar-stable">
<h1 class="title">Unilever</h1>
</ion-header-bar>
<ion-content>
<div class="modal">
<ion-header-bar>
<h1 class="title">Login</h1>
</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" required>
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="loginData.password" required>
</label>
<label class="item">
<button class="button button-block button-positive" type="submit">Log in</button>
</label>
</div>
</form>
</ion-content>
</div>
</ion-content>
</ion-pane>
</body>
</html>
and this is my angular code
angular.module('loginform.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal) {
// Form data for the login modal
$scope.loginData = {};
// Create the`enter code here` login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
if($scope.loginData.username === users.username && $scope.loginData.password===users.password)
alert("Welcome");
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.users = [
{ username: 'Marwan ', password:'taro', course1:'software engineering', course2:'Web Dev' id: 1 },
{ username: 'Galal', password:'1234', course1:'software engineering' course2:'workflow engines' id: 2 },
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
});
$location.path('/newpath') will let you redirect. Inject the $location service in your controller and call the $location.path function at the place of your alert.
Hi try this example this will help you:
login.html:
<div class="container" data-ng-controller="login as vm">
<form class="login">
<p>
<label for="login">Email:</label>
<input type="text" name="login" id="login" data-ng-model="log.email" placeholder="aaa#gmail.com" required>
</p>
<p>
<label for="password">Password:</label>
<input type="password" name="password" id="password" data-ng-model="log.password" placeholder="Password" required>
</p>
<p class="login-submit">
<button type="submit" class="login-button" data-ng-click="vm.login(log)">Login</button>
</p>
<p class="forgot-password">Forgot your password?</p>
</form>
login.js
(function () {
'use strict';
var controllerId = 'login';
angular.module('app').controller(controllerId, ['common', 'loginservice', '$location', '$rootScope', login]);
function login(common, loginservice, $location, $rootScope) {
var getLogFn = common.logger.getLogFn;
var log = getLogFn(controllerId);
var loggedIn;
var vm = this;
vm.title = 'login';
vm.login = function (log) {
loginservice.getLoginData(log.email, log.password, vm.loginsuccess);
}
vm.loginsuccess = function (data) {
if (data == null) {
toastr.error('Invalid username and password');
}
else {
sessionStorage.Id = data;
loggedIn = data;
$location.path('/dashboard');
$rootScope.$broadcast('logindata', data);
}
}
activate();
function activate() {
common.activateController([], controllerId)
.then(function () { log('Activated login View'); });
$rootScope.$broadcast('logindata', 0);
}
}
})();
loginservice.js
(function () {
'use strict';
var serviceId = 'loginservice';
angular.module('app').factory(serviceId,
['common', loginservice]);
function loginservice(common) {
var $q = common.$q;
var service = {
getLoginData: getLoginData,
};
return service;
function getLoginData(email, password,success) {
var data;
if (email === 'parthi' && password === '12345') {
data= 1;
}
else
data = null;
return success(data);
}
}
})();