How to implement multiple templates in one model using angularjs? - javascript

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

Related

Bootstrap uib modal with multiple controllers

I am trying to use a bootstrap modal and I am passing the main controller in the $uibModal.open({controller : "mainCtrl"}).
So far its all good now I want to have several tabs in the modal and I want each tab to have its own controller using ng-controller. This is where I am getting the error : [$injector:unpr] Unknown provider: $uibModalInstanceProvider <- $uibModalInstance <- tabController
which is expected because it seems we cannot have ng-controller inside uibModalInstance.
Is there an alternate way of achieving this?
It should work for you like in this |- demo fiddle - |- demo plnkr with template files -| I've create for you. Please compare this solution carefully with yours. You can have as many ng-controller defined in your uibModal template as you want. Also ensure that your controller is a part of the same module.
View
<div ng-app="ui.bootstrap.demo">
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header" ng-controller="ModalDemoSecondCtrl">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" ng-controller="ModalDemoThirdCtrl">
Demo form submit:
<br/>
<form ng-submit="ok()">
<div class="input-group animated fadeIn">
<input type="text" class="form-control finderBar" ng-model="searchTerm" placeholder="City, State..." autofocus>
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="ok()">Go!</button>
</span>
</div>
</form>
</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>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
</div>
</div>
AngularJS application
angular.module('ui.bootstrap.demo', ['ui.bootstrap'])
.controller('ModalDemoCtrl', function($rootScope, $scope, $log, $uibModal) {
$scope.open = function(size, template) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: template || 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size
});
};
$scope.toggleAnimation = function() {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
}).controller('ModalDemoSecondCtrl', function($rootScope, $scope, $log, $uibModal) {
}).controller('ModalDemoThirdCtrl', function($rootScope, $scope, $log, $uibModal) {});
angular.module('ui.bootstrap.demo')
.controller('ModalInstanceCtrl', function($scope, $uibModalInstance) {
$scope.ok = function() {
$uibModalInstance.dismiss('cancel');
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});

Using Angular controller inside Bootstrap Modal

[html]
<div class="modal fade" id="proj-edit" tabindex="-1" role="dialog" aria-hidden="true" data-remote="update.html">
<div class="modal-dialog">
<div class="modal-content" ng-controller="UpdateProjectController"></div>
</div>
</div>
[javascript]
var ProjectApp = angular.module('ProjectApp', ["ui.bootstrap"]);
ProjectApp.controller('UpdateProjectController', ["$scope","$http", function($scope, $http){
$scope.message = 'Please enter valid case number';
$scope.UpdateProject = function(){..do something..};
}]);
[update.html]
<div class="modal-header" >
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 id="myModalLabel" class="modal-title">Update Project</h4>
</div>
<div class="modal-body">
{{message}}
</div>
<div class="modal-footer">
<button type="submit" class="btn blue-soft" ng-click="UpdateProject()">Update</button>
<button type="button" class="btn default" data-dismiss="modal">Cancel</button>
</div>
Issue: Modal is being invoked from JQuery using .modal('show') method. My intention is to render the controller whenever the modal is opened. However, it seems that the modal does not recognise the controller and no message nor function from the controller can be executed. Appreciate your help on this matter. TQ.
HI please check the example
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">
<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>
example.js
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
};
for reference http://embed.plnkr.co/As959V/
The reason is update.html is quite a massive form and preferred not to
include inside main html file. So, the modal is basically calling the
remote html file.
Your remote html file and your modal file maybe using 2 different instances of the UpdateProjectController.
As said by Martijn, you coud use ui-bootstrap for this but if you don't want to, you could solve it by using a directive.
// directive to open the modal
var app = angular.module('myApp', []);
app.directive('myModal', myModal);
myModal.$inject = [];
function myModal() {
return {
restrict: 'A',
link: link
}
function link($scope, $element, $attributes) {
$element.click(function (event) {
angular.element($attributes.modalId).modal();
});
}
}
app.controller('ModalCtrl', ModalCtrl);
ModalCtrl.$inject = [];
function ModalCtrl() {
$scope.message = 'Please enter valid case number';
$scope.UpdateProject = function(){..do something..};
}
Modal is being invoked from JQuery using .modal('show') method.
So in case you use a button to do this render the modal, you could easily include the directive as an attribute to the modal instead of ng-click()
Lastly, include the modal file in your template file
<body>
<div ng-controller="UpdateProjectController">
// So in case you use a button to do this render the modal,
// you could easily include the directive as an attribute to the modal instead of ng-click()
<a href="javascript:;" my-modal modal-id="#modalUpdateProject">
Update Project
</a>
</div>
<!-- modals -->
<div ng-controller="ModalCtrl">
<ng-include src="'path/to/modal.html'"></ng-include>
</div>
<!-- end modals -->
</body>

Image does not display in modal using angularJS

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

Angularjs : Dynamically created tab does not get active/selected

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

Display dynamic content in Angular Modal from parent controller

I am using angular-modal-service. I wish to modify the content of modal body as custom input text from the user. My index.html looks like :
<head>
<link rel="import" href="notify.html">
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<input type="text" ng-model="custom_text" />
<input type="button" value="Click here for notification" ng- click="showNotification()" />
</body>
</html>
My app.js :
var app = angular.module("someApp", ['angularModalService']);
app.controller("mainController", function($scope, ModalService){
$scope.showNotification = function(){
document.getElementById('my_text').innerHTML = $scope.custom_text;
alert($scope.custom_text);
ModalService.showModal({
templateUrl: "notify.html",
controller: "YesNoController"
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = result ? "You said Yes" : "You said No";
});
});
}
});
app.controller('YesNoController', ['$scope', 'close', function($scope, close) {
$scope.close = function(result) {
close(result, 500); // close, but give 500ms for bootstrap to animate
};
}]);
My notify.html has :
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="close(false)" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Yes or No?</h4>
</div>
<div class="modal-body">
<p><span id="my_text"></span></p>
</div>
<div class="modal-footer">
<button type="button" ng-click="close(false)" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" ng-click="close(true)" class="btn btn-primary" data-dismiss="modal">Yes</button>
</div>
</div>
I am actually trying to modify notify.html modal body in the controller by accessing it through DOM. But it is giving me the error : Cannot set property 'innerHTML' of null.
How can I do this. Please help.
First you should only manipulate the DOM in angular with directives. So your approach of accessing the DOM in this way would probably cause you problems even if it was working.
That being said. You just pass the scope value to the Modal and bind the value directly to the template with handlebars {{custom_text}}
Update .showModal Method to pass scope values:
ModalService.showModal({
templateUrl: "notify.html",
controller: "YesNoController",
inputs: {
'custom_text': $scope.custom_text
}
}).then(function(modal) {
modal.element.modal();
modal.close.then(function(result) {
$scope.message = result ? "You said Yes" : "You said No";
});
});
Modal HTML:
<div class="modal-body">
<p><span id="my_text">{{custom_text}}</span></p>
</div>

Categories