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>
Related
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>
I'm calling for the bootstrap modal HTML file from my main HTML file here is an example code of what I'm doing. Link
<div class="container" ng-controller="MainAngularControler"> <!--The main div with the controller in it-->
As it shows can anyone suggest a way to call another Angular controller for bootstrap modal. because the button that calls for the modal to load is in a div which already has an angular controller, this doesn't let the modal to load another different angular controller. The idea behind all these is to make my code more understandable.
When creating the modal instance in your angular controller you need to pass the modal controller like this.
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
Have a look at this plunker or the code below.
var app = angular.module('plunker', ["ui.bootstrap"]);
app.controller('MainCtrl', function($scope, $uibModal) {
$scope.name = 'World';
$scope.OpenModal = function(){
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
size: "lg",
controller: 'modalController'
});
modalInstance.result.then(function (selectedItem) {
//$ctrl.selected = selectedItem;
}, function () {
//$log.info('Modal dismissed at: ' + new Date());
});
};
});
app.controller('modalController', function($scope){
$scope.text = 'I am from modal controller SCOPE';
});
<!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 src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
THIS IS A MODAL. {{text}}
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
<a ng-click="OpenModal()">Open Modal</a>
</body>
</html>
I am trying to route my navbar using angular js but the content in that HTML file is not displaying, I don't know what is the problem.
here is my register page in this register and login functionality is there on angularjs parse
<!DOCTYPE html>
<html ng-app="AuthApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.2.12.min.js"></script>
<!-- start: CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="js/signuplogintoggle.js" charset="utf-8"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="css/style.css" rel="stylesheet">
<link href="css/sidebarnav.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext' rel='stylesheet' type='text/css'>
<!-- end: CSS -->
<meta charset=utf-8 />
<title>EPPF</title>
</head>
<body>
<div class="main-container">
<div ng-hide="currentUser">
<form ng-show="scenario == 'Sign up'" class="form-signin" role="form">
<h2 class="form-signin-heading text-center">EPPF</h2>
Email: <input type="email" ng-model="user.email" class="form-control" /><br />
Username: <input type="text" ng-model="user.username" class="form-control" /><br />
Password: <input type="password" ng-model="user.password" class="form-control"/><br />
<button ng-click="signUp(user)" class="btn btn-lg btn-primary btn-block">Sign up</button>
</br>
Login</p>
</div>
</form>
<form ng-show="scenario == 'Log in'" class="form-signin" role="form">
<h2 class="form-signin-heading">Please sign in</h2>
Username: <input type="text" ng-model="user.username" class="form-control" role="form"/><br />
Password: <input type="password" ng-model="user.password" class="form-control" role="form" /><br />
<button ng-click="logIn(user)" class="btn btn-lg btn-primary btn-block">Log in</button>
</br>
Sign up</p>
</form>
</div>
<div ng-show="currentUser">
<div id="wrapper">
<div class="" ng-controller = "MainCtrl">
<div class="container">
<div class="menu">
<a ng-click="setRoute('home')" class="btn">Home</a>
<a ng-click="setRoute('about')" class="btn" >About</a>
<a ng-click="setRoute('dashboard')" class="btn">dashboard</a>
</div>
<div class="ng-view">
</div>
</div>
</div>
<button ng-click="logOut(user)" class="logout">Log out</button>
</div>
<script type="text/javascript">
Parse.initialize("34olOarYIJtsSy1YcuCdR4RFBPzKthQfAyotWjXP", "vvoqLVt7kMDwuxYliMuOJthEpMvRA3PVFdxC5izY");
angular.module('AuthApp', [])
.run(['$rootScope', function($scope) {
$scope.scenario = 'Sign up';
$scope.currentUser = Parse.User.current();
$scope.signUp = function(form) {
var user = new Parse.User();
user.set("email", form.email);
user.set("username", form.username);
user.set("password", form.password);
user.signUp(null, {
success: function(user) {
$scope.currentUser = user;
$scope.$apply();
},
error: function(user, error) {
alert("Unable to sign up: " + error.code + " " + error.message);
}
});
};
$scope.logIn = function(form) {
Parse.User.logIn(form.username, form.password, {
success: function(user) {
$scope.currentUser = user;
$scope.$apply();
},
error: function(user, error) {
alert("Unable to log in: " + error.code + " " + error.message);
}
});
};
$scope.logOut = function(form) {
Parse.User.logOut();
$scope.currentUser = null;
};
}]);
</script>
</body>
</html>
This is my register page and angular js code is
angular.module('AuthApp',[]).
config(function($routeProvider){
$routeProvider.
when('/about', {template:'partials/about.html'}).
when('/dashboard', {template:'partials/dashboard.html'}).
otherwise({redirectTo:'/home',template:'partials/home.html'})
});
function MainCtrl($scope,$location) {
$scope.setRoute = function(route){
$location.path(route);
}
}
I don't know what is the problem I cannot see the routes in ngview directory
I think the ngRoute service is missing there :
angular.module('AuthApp', ['ngRoute']);
See the doc : https://docs.angularjs.org/api/ngRoute
Also, it's suppose to be templateUrl instead of template.
angular.module('AuthApp',['ngRoute'])
.config(function($routeProvider){
$routeProvider
.when('/about', {templateUrl:'partials/about.html'})
.when('/dashboard', {templateUrl:'partials/dashboard.html'})
.otherwise({redirectTo:'/home',templateUrl:'partials/home.html'})
});
function MainCtrl($scope,$location) {
$scope.setRoute = function(route){
$location.path(route);
}
}
Also, I don't think you should use the setRoute function. You should just set the href like that :
Home
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>