Click here to Skip to main content
15,887,331 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am going to develop modalpopup in angularjs for this i follow this link
http://jsfiddle.net/alexsuch/RLQhh/

but this code is not working in my notepad editor(its work in site).
Please tell whats wrong with me..

Thanks in advance

khaleelS
Posted
Comments
Akhil Mittal 9-Jul-15 4:42am    
Can you share your code of notepad editor?
Akhil Mittal 9-Jul-15 4:44am    
I am sure you must be missing to include angular js library.The example given there says to include angular js library 1.2.1. Please check.

1 solution

I am sure you must be missing to include angular js library.The example given there says to include angular js library 1.2.1. Please check.
 
Share this answer
 
Comments
khaleels 9-Jul-15 4:58am    
no..i mention all things in it
khaleels 9-Jul-15 4:58am    
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl" class="container">

Modal example


<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>


<script>
var mymodal = angular.module('myApp', []);

mymodal.controller('MainCtrl', function ($scope) {
$scope.showModal = false;
$scope.toggleModal = function(){
$scope.showModal = !$scope.showModal;
};
});

mymodal.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>' +
'' +
'</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;
});
});
}
};
});
</script>
</div>
</body>
</html>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900