I'm trying to add multiple dialogs modals on my homepage but I may doing something wrong.
I've downloading this plunker preview : Preview
But I have this console's error , "Error: [ng:areq] Argument 'addManagerModal' is not a function, got undefined" after adding ui-bootstrap and angular.
The code look very simple but it's not working:
HTML:
<!DOCTYPE html>
<html ng-app='modalviews'>
<head>
<title> My app title</title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
</head>
<body>
<div class="span12" style="background-color:">
<div class="span2 nav1" style="background-color:#EFEFEF">
<ul style="padding:45px 0px 10px 5px">
<div ng-controller="addManagerModal">
<script type="text/ng-template" id="addManager.html">
<div class="modal-header">
<h3>I'm a modal!'</h3>
</div>
<div class="modal-body">
hii this is manager
</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>
<a ng-click="open()">Add Manager</a>
</div>
<div ng-controller="addCaptainModal">
<script type="text/ng-template" id="addCaptain.html">
<div class="modal-header">
<h3>I'm a modal!'</h3>
</div>
<div class="modal-body">
hii this is captain
</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>
<a ng-click="open()">Add Captain</a>
</div>
</ul>
</div>
</div>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="modal.js"></script>
</body>
</html>
JAVASCRIPT:
angular.module('modalviews', ['ui.bootstrap']);
// add manager Modal
var addManagerModal = function($scope, $modal) {
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'addManager.html',
controller: ModalInstanceCtrl});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
//add Captain modal
var addCaptainModal = function($scope, $modal) {
$scope.open = function () {
var captainModalInstance = $modal.open({
templateUrl: 'addCaptain.html',
controller: captainModalInstanceCtrl});
};
};
var captainModalInstanceCtrl = function ($scope, $modalInstance) {
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I hope somebody can help me.
I think you need to add these as controllers instead of just vars using angular.
angular.module('modalviews')
.controller('addManagerModal', function($scope, $modal) {
...
}
Thanks man,
I've changed the js file for this :
'use strict';
angular.module('weShareApp', ['ngAnimate', 'ui.bootstrap']);
angular.module('weShareApp').controller('loginModalCtrl', function ($scope, $uibModal, $log) {
$scope.items = [];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'loginModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
angular.module('weShareApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
Unfortunetly I don't any errors but I can't click on my buttons and the bootstrap.css seems to be load...
Related
Any one can refer me a link or a demo of code for developing a popup using angularjs.
I have tried the following code but it's not working.
var myApp = angular.module('myApp', ['ngRoute', 'ngMap', 'ui.bootstrap']);
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "views/home.php",
controller: 'PopupDemoCont'
})
.when("/profile.php", {
templateUrl: "views/profile.php"
})
.otherwise({
redirectTo: "/"
});
});
myApp.controller("ImageController", ["$scope", function($scope) {
$scope.logoimage = "images/logo.png";
$scope.bgtextimage = "images/bgtextimage.png";
}]);
myApp.controller("PopupDemoCont", ["$scope", "$modal", function($scope, $modal) {
$scope.open = function() {
console.log('opening pop up');
var modalInstance = $modal.open({
templateUrl: 'views/popup.php',
controller: 'PopupCont'
});
};
}]);
myApp.controller("PopupCont", ["$scope", "$modalInstance", function($scope, $modalInstance) {
$scope.close = function() {
$modalInstance.dismiss('cancel');
};
}]);
In bellow html, I set ng-controller but it isn't working.
<div class="book_div">
<div class="book_content">
<p id="book-text">Facing Immigration
<br> Problems?
</p>
<p>Helpful Guid To Navigate Your Case</p>
<div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive">
</div>
<a class="submit-button book_btn" ng-click="open()">Free download</a>
</div>
</div>
It is giving the Error:
[$injector:unpr].
You can use uibModalinstance.
On button click call the function open.
code for open function:
$scope.open = function(uuid,name){
var instance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'common/common/partials/delete-
confirm.tpl.html',
controller: function ($uibModalInstance,
$scope) {
$scope.name = Name;
$scope.icon = "fa-cogs";
$scope.description = "Yo have opened uib
Popup"
$scope.delete = function () {
$uibModalInstance.close($scope.deleteValue);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
}
I have used this code for deleting my record. You can use in your way, if you want to take response of Popup you can use:
instance.result.then(function (option) {
// Your code here
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
HTML template will be like:
<div class="modal-header gray_background">
<h4><b>Permanently Delete - <i class="fa {{icon}} folderIcon" aria-hidden="true"></i> {{name}} </b></h4>
</div>
<div class="modal-body">
<span data-ng-bind-html="description"></span>
<center style="margin-top: 10px;">
<div>Type "delete" to confirm
<input type="text" class="input" ng-model="deleteValue" required />
</div>
</center>
</div>
<div class="modal-footer gray_background">
<button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
<button class="btn btn-danger" type="button" ng-click="delete()">Delete</button>
</div>
Hope this would be helpful, if you have any further query you can ask.
Thanks!
My js file:
var camListApp = angular.module('camListApp', ['ui.bootstrap', 'angularUtils.directives.dirPagination'])
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
camListApp.controller("Hello", function($scope, $http, $uibModal){
$scope.open = function (url){
$scope.imageView = url;
var modalInstance = $uibModal.open({
templateUrl: 'popup.html',
controller: 'ModalInstanceCtrl',
resolve: {
records : function () {
return $scope.imageView;
}
}
});
}
$http.get('http://localhost:8081/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
});
angular.module('camListApp').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, records) {
$scope.records = records;
$scope.ok = function () {
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
My html file:
<html ng-app"camListApp">
<div ng-controller="Hello">
<table border = 1>
<thead>
<tr>
<th>CamID</th>
<th>Timestamp</th>
<th>Image</th>
<th>View image</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="record in records | itemsPerPage:5 | filter:searchBox | orderBy:'+timestamp'">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td><img ng-src="http://localhost:9100/Images/{{record.filename}}.png" width="40" height="50"></td>
<td><button class="btn btn-primary" ng-click="open(record.filename)">View</button></td>
</tr>
</tbody>
</table>
</div>
<script type="text/ng-template" id="popup.html">
<div class="modal-header">
<h3 class="modal-title">Image View</h3>
</div>
<div class="modal-body">
<img ng-src="http://localhost:9100/Images/{{imageView}}.png" width="40" height="50"></div>
<div class="modal-footer">
<button class="btn btn-warning" onclick="location.href='http://localhost:8082/';">Cancel</button>
</div>
</script>
I was trying to display my images on the modal form using bootstrap ui but don't know why the images does not display on the modal. Anybody can help me solve this? My images are store in a web server folder and retrieve it from there.
index.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">
<img ng-repeat="img in imgs" ng-src="{{img}}"/> {{img}}
</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>
example.js
---------
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log,$sce) {
$scope.open = function () {
var parentScope = $scope;
$scope.imgs =[];
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/f00"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/0f0"));
$scope.imgs.push($sce.trustAsUrl("http://dummyimage.com/64X64/000/00f"));
$modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: function ($scope, $modalInstance) {
$scope.imgs = parentScope.imgs;
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
});
};
};
Demo
This is my code
var app = angular.module('drinks-app', ['ui.bootstrap']);
app.controller('MainCtrl', function($scope, Drink) {
'use strict';
Drink().then(function(drinks) {
$scope.drinks = drinks;
});
$scope.deleteItem = function(item) {
console.log("deleting item " + item.name);
};
});
app.factory('Drink', function($http) {
'use strict';
return function() {
return $http.get('drinks.json').then(function(response, status) {
return response.data;
});
};
});
app.directive('ngConfirm', function($modal, $parse) {
return {
// So the link function is run before ngClick's, which has priority 0
priority: -1,
link: function(scope, element, attrs) {
element.on('click', function(e) {
// Don't run ngClick's handler
e.stopImmediatePropagation();
$modal.open({
templateUrl: 'ng-delete-template',
controller: 'ngConfirmController',
resolve: {
message: function() {
return attrs.ngConfirm;
}
}
}).result.then(function() {
// Pass original click as '$event', just like ngClick
$parse(attrs.ngClick)(scope, {$event: e});
});
});
}
};
});
app.controller('ngConfirmController', function($scope, $modalInstance, message) {
$scope.message = message;
$scope.yes = function() {
$modalInstance.close();
};
$scope.no = function() {
$modalInstance.dismiss();
};
});
<!DOCTYPE html>
<html ng-app="drinks-app">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<script src="script.js"></script>
<script type="text/ng-template" id="ng-delete-template">
<div class="modal-body">
<p>{{message}}</p>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left" ng-click="no()">No</button>
<button class="btn btn-primary pull-right" ng-click="yes()">Yes</button>
</div>
</script>
<script type="text/ng-template" id="ng-add-template">
<div class="modal-body">
<select >
<option value="emp" >emplopyee</option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-link pull-left">ADD</button>
</div>
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<button class="btn btn-small" type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Delete</button>
<button class="btn btn-small" type="button" ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">Add</button>
</div>
</body>
</html>
Thsi is my plunker : http://plnkr.co/edit/Gm9lFsGb099w6kCMQoVY?p=preview
In the above code use ui.bootstrap for model popup (delete), now i want to use same model popup for display another template . that means i have two dropdown display list of employees and departments. In previous popup display delete information text only and templateUrl :- assign delete.html page statically. now i want to assign dynamic path to templateUrl in AngularJs model popup
You could pass template name from directive attribute & then place it over $modal.open's templateUrl option like
<button template-path="abc.html" class="btn btn-small" type="button"
ng-click="deleteItem(drink)" ng-confirm="Are you sure you want to delete '{{drink.name}}'">
Delete
</button>
Then in directive
templateUrl: attrs.templatePath || 'ng-confirm-template',
Demo Here
I have the below angularjs code which creates tabs by pressing the new button. But the newly created tab does not get active or selected after creation. Always the one before the last one get active !
Anyone knows what is wrong?
plnkr : https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview
HTML :
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsParentController">
<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">
<ul>
Sure to delete?
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
<uib-tabset active="active">
<uib-tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
>
<div ng-controller="TabsChildController">
<div>
{{$parent.workspace.id}} : {{ $parent.workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
<button class="btn" type="button" ng-click="open('sm',workspace)">Delete</button>
</div>
</uib-tab>
<uib-tab index="0" select="addWorkspace()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Javascript :
var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);
app.controller("TabsParentController", function ($scope,$uibModal) {
$scope.animationsEnabled = true;
$scope.open = function (size, workspace) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
workspace: function () {
return workspace;
}
}
});
modalInstance.result.then(function (selectedItem) {
var index=$scope.workspaces.indexOf(selectedItem)
$scope.workspaces.splice(index,1);
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
var setAllInactive = function() {
//angular.forEach($scope.workspaces, function(workspace) {
// workspace.active = false;
// });
};
var addNewWorkspace = function() {
var id = $scope.workspaces.length+1 ;
$scope.workspaces.push({
id: id,
name: "Workspace " + id,
});
$scope.active=$scope.workspaces.length -1;
};
$scope.workspaces =
[
];
$scope.addWorkspace = function () {
setAllInactive();
addNewWorkspace();
};
$scope.remove=function(item){
var index=$scope.workspaces.indexOf(item)
$scope.workspaces.splice(index,1);
}
});
angular.module('plunker').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, workspace) {
$scope.selectedworkspace = workspace;
$scope.ok = function () {
$uibModalInstance.close( $scope.selectedworkspace );
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
app.controller ("TabsChildController", function($scope, $log){
});
If you want to the newest tab as active, you will want to set the
$scope.active = $scope.workspaces.length;
but the other problem is that, when you push a new workspace. it takes a bit of time for the directive to re-render the DOM and get all the scope variables ready. therefore right after push, if you attempt to assign the newest tab as active will result in error.
So, to quickly prove my point (no the most correct way), try this and your code to will work. Remember to inject $timeout as a dependency
app.controller("TabsParentController",
function ($scope,$uibModal, $timeout) {
....
....
$scope.workspaces.push({
id: id,
name: "Workspace " + id,
});
//introduce a 50 ms delay before setting the active tab
$timeout(function(){
$scope.active = $scope.workspaces.length;
}, 50);
....
....
}
);
see it in plunker
Y must pass a list of data to a dialog to fill a combobox.
In other part of the code I passed a string to dialogs, but, using the same method for this case, It didn´t work.
Here is my js code:
$scope.addPartido = function () {
if ($scope.dataProv.locationsProv.provincias) {
$modal.open({
templateUrl: '../../secure/addPartido/addPartidoDialog.html',
controller: function ($scope, $modalInstance) {
$scope.close = function () {
$modalInstance.close();
};
}
});
}
};
Inside my controler I have the variable $scope.dataProv.locationsProv.provincias fill with de data.
And here is my html code:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<label>Provincia<span class="text-danger">*</span></label>
<div class="dropdown">
<select ng-options="item.name for item in dataProv.locationsProv.provincias| orderBy:'name'"
ng-id="mySelProvincia" class="form-control" required="required"
ng-model="selectedProv">
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="close()">
Cerrar
</button>
</div>
</div>
</div>
It is easy!
This code works perfectly:
$scope.addPartido = function () {
if ($scope.dataProv.locationsProv.provincias) {
$modal.open({
templateUrl: '../../secure/addPartido/addPartidoDialog.html',
controller: function ($scope, $modalInstance, listProv) {
$scope.statusProv = 'loading...';
$scope.provincia = "Select provincias";
$scope.dataProv = {
"locationsProv": {}
};
$scope.dataProv.locationsProv.provincias = listProv;
$scope.close = function () {
$modalInstance.close();
};
},
resolve: {
listProv: function () {
return $scope.dataProv.locationsProv.provincias;
}
}
});
}
};