I have a following controllers:
/** Calculation controller **/
app.controller('calculationController', ['$scope','$modal','content', function($scope, $modal, content) {
/** data recieved from get request **/
$scope.data = content.data; //promise
/** function to edit data **/
$scope.edit = function(item){
var htmlContents = {
title: 'Edit product',
body: 'Please confirm that you want to edit the product'
}
var modalInstance = $modal.open({
templateUrl : templateBase + 'views/modal/dialog.html',
controller : 'modalInstanceController',
resolve : {
items : function() { return item; },
html : function() { return htmlContents; }
}
});
}
/** function to delete data **/
$scope.trash = function(item){
}
}]);
app.controller('modalInstanceController', ['$scope', '$modalInstance','items','html', function($scope,$modalInstance,items,html) {
$scope.title = html.title;
$scope.body = html.body;
}]);
What I'm trying to accomplish is to open a dialog with contents from 'dialog.html' however once I click the :
<img ng-src="images/icn_edit.png" ng-click="edit(item)" alt="Edit">
$injector:unpr is appearing in console log.
dialog.html contents are :
<div ng-controller="modalInstanceController">
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</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>
I know that I'm missing to inject something however after hours of looking at the code I'm unable to locate what...
From what I can observe '$scope', '$modalInstance','items','html' are being injected in modelInstanceController..
Any help appreciated.
thank you
From your dialog.html remove
Ng-controller="modalInstanceController"
It should be plain div and that will do the trick
Your html markup for dialog.html should look like this:
<div>
<div class="modal-header">
<h3>{{title}}</h3>
</div>
<div class="modal-body">
{{body}}
</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>
Related
I have created a ng-repeat of blocks where I would like to edit a block in a modal window and cancel the window to discard any changes.
I have managed to get the modal window working and editing blocks as I want however I am trying to use angular.copy to create a backup of the original element and set it when cancel is clicked.
here is my html for my ng-repeat:
<div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
<div class="row" ng-show="textBlock(block)" ng-click="showEditButtons()" ng-drag="true" ng-drag-data="block">
<h4> {{ block.title }} </h4>
<p> {{ block.body }} </p>
<button class="btn btn-default" ng-show="showButtons" ng-click="editBlock(block); modalUpdate(block)">Edit!</button>
<button class="btn btn-default" ng-show="showButtons" ng-click="deleteBlock(block)">Delete!</button><br>
<br>
</div>
</div>
</div>
and here is my html for the modal:
<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">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="block.title" ng-model="titleText"/>
<input class="form-control" placeholder="Main Body" type="text" ng-model="block.body" ng-model="bodyText"/>
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
and here is the modal part of the controller:
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
$scope.saveBlock = function () {
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
block = $scope.backUp;
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
However every time I click cancel the changes to the block are still saved and nothing is reverted.
Any help would be awesome!
Try to remove the line
$scope.cancel = function () {
// block = $scope.backUp; <--- this one
$uibModalInstance.dismiss('cancel');
};
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
// the above line does not create new instance of $scope.block instead links to block, so whenever $scope.block gets updated, block also gets updated
Change Your code as :
HTML :
<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">
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="data.title" ng-model="titleText" />
<input class="form-control" placeholder="Main Body" type="text" ng-model="data.body" ng-model="bodyText" />
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
Have changed ng-model to bind to data object
JS :
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function ($scope, $uibModalInstance, block) {
$scope.data = {};
$scope.data.title = block.title;
$scope.data.body = block.body;
$scope.saveBlock = function () {
block.title = $scope.data.title;
block.body = $scope.data.body;
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
};
Have assigned to $scope.block only if saveBlock is triggered otherwise nothing happens on cancel
I have my modal set up as so
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="removeSetting()">Yes</button>
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
</script>
Hitting the cancel button does what it should, simply closes the modal. My problem comes when a user hits the yes button. My function removeSetting() never gets executed.
$scope.removeSetting = function() {
TwoFactorAuthenticationService.removetAuthetication().then(function(data) {
$scope.busy3=false;
notifyService.alert("error", notifyService.getAlertText('2FactorRemovedToken'));
$scope.busy=true;
$timeout(function() {
$scope.templateUrl = 'twofactorsetup/step1.html';
}, 3000);
}, function() {
notifyService.alert("error", notifyService.getAlertText('2FactorRemoveTokenFailed'));
});
};
That is the function that should be called and executed. What am I missing?
Place code like this in modal initialize
$modal.open({
templateUrl: 'myModalContent.html',
scope: $scope,
controller: function($scope, $modalInstance) {
$scope.removeSetting = function() {
//place your code here or call function from parent scope
$scope.$parent.removeSetting();
$modalInstance.dismiss('cancel');
};
}
});
You don't need scope parameter if not using parent scope.
Or you can use call function from parent scope from template like this (by using $parent.removeSetting() call)
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Confirm</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to remove Two Factor Authentication from your profile?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$parent.removeSetting()">Yes</button>
<button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
</div>
</script>
can you please tell me how to create list dynamically in angulat.js..Actullly I am able to make list when user press add button and fill the field .
In other words ,Please check this fiddle whenever you fill the fields it generate a row.And you can get Id when you click the row .Fiddle http://jsfiddle.net/wc4Jm/6/
Now I am trying to do this using bootstrap model .in other words on button click first I show a pop up screen then there is "add" button .on click that it generate the row.but I am getting "undefined".My I insert the model div inside the controller ? here is
http://jsbin.com/vubojoxo/4/
Why I am getting this error ?
XMLHttpRequest cannot load file:///C:/Users/asd/Desktop/angular/angularproject/dialog.html. Received an invalid response. Origin 'null' is therefore not allowed access.
I am getting this error when I used plunker..and run in my desktop ..
I make this html ?
<!doctype html>
<html ng-app="plunker">
<head>
<script src="angular.js"></script>
<script src="ui-bootstrap-tpls-0.2.0.js"></script>
<link href="bootstrap-combined.min.css" rel="stylesheet">
<script src="index.js"></script>
</head>
<body>
<div ng-controller="DialogDemoCtrl">
<a class="btn" data-toggle="modal" href="" ng-click="openPopupScreen()">Add Contend</a>
</div>
</body>
</html>
....
Dialog.html
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h1>Add Element</h1>
</div>
<div class="modal-body">
<form >
<label>Name:</label><input type="text" class="span3" ng-model="activeItem.name"></br>
<label>Content Name:</label><input type="password" class="span3" ng-model="activeItem.content"></br>
<button type="submit" class="btn btn-success" ng-click="addItem()">Add In List</button>
<button type="reset" class="btn ">Clear</button>
</form>
</div>
<div class="modal-footer">
<a class="btn" data-dismiss="modal" aria-hidden="true">close</a>
</div>
js code:
var myApp = angular.module('plunker', ['ui.bootstrap']);
myApp.controller('DialogDemoCtrl', function($scope,$dialog) {
$scope.items = [];
$scope.activeItem = {
id:'',
name: '',
content: ''
};
$scope.addItem = function () {
$scope.activeItem.id = $scope.items.length + 1;
$scope.items.push($scope.activeItem);
$scope.activeItem = {}; /* reset active item*/
};
$scope.getId = function (item) {
alert('ID: '+item.id);
};
$scope.openPopupScreen = function () {
alert('Check Open pop up screen');
$dialog.dialog({}).open('dialog.html');
};
});
Check this Plunker
In this example i used angular-ui library which wraps bootstrap's modal to angular
based on this StackOverflow Answer
ModalDemoCtrl
$scope.items = [];
$scope.getId = function(item) {
alert('ID: ' + item.id);
};
// This opens a Bootstrap modal
$scope.open = function() {
var modalInstance = $modal.open({
template: $scope.modal_html_template,
controller: ModalInstanceCtrl
});
modalInstance.result.then(function(newItem) {
// On modal success
newItem.id = $scope.items.length + 1;
$scope.items.push(newItem);
}, function() {
// On modal cancelation
});
}
ModalInstanceCtrl
$scope.name = '';
$scope.content = '';
$scope.ok = function() {
var response = {
'name': $scope.name,
'content': $scope.content
};
$modalInstance.close(response);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
HTML
<body>
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind="" inner-html="modal_html_template" class="hidden">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<div class="modal-body">
<div class="form-group">
<label>Name</label>
<!-- using $parent because ui-bootstrap nested 2 controllers. this is a workaround -->
<input type="text" class="form-control" ng-model="$parent.name" placeholder="Enter Name">
</div>
<div class="form-group">
<label>Content</label>
<!-- using $parent because ui-bootstrap nested 2 controllers. this is a workaround -->
<input type="text" class="form-control" ng-model="$parent.content" placeholder="Enter Content">
</div>
</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>
</div>
<div class="container">
<h2>Modal Example https://stackoverflow.com/questions/24988561</h2>
<button class="btn" ng-click="open()">Open Modal</button>
<div>
<ul>
<li ng-repeat="item in items">
<a ng-click="getId(item)">{{ item.id }} | {{ item.name + ' ' + item.content }}</a>
</li>
</ul>
</div>
</div>
</div>
</body>
I'd like to ask the user to choose among a few possibility but without breaking the style of my page. So I'd like to prompt an alert box or something like that BUT with a dropdown list () in it.
Is it possible?
If so how?
According to the documentation
Official Example
Add angular-bootstrap.js in your project, and 'ui.bootstrap' in your module
in HTML
<div ng-controller="ModalDemoCtrl">
<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>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
<button class="btn btn-default" ng-click="open()">Open me!</button>
<button class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button class="btn btn-default" ng-click="open('sm')">Small modal</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
JS
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.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());
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
I am integrating the modal from Angular Bootstrap and trying to adapt code sample from here to my app. I get the error: Error: [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance
What do I need to do to make $modalInstance work? I see from code sample that they have written it so that it is within the scope of the function but I am not sure how to write things when chaining controllers.
angular.module('myApp', ['ui.bootstrap']).
controller('ModalInstanceCtrl', function($scope, $modalInstance) {
}).
factory('AuthService', ['$http', '$rootScope', '$modal',
function($http, $rootScope, $modal) {
return {
loginModal: function(callback) {
var modalInstance = $modal.open({
templateUrl: '/partials/main/signin',
controller: 'ModalInstanceCtrl'
});
modalInstance.result.then(function(selectedItem) {
$scope.selected = selectedItem;
}, function() {});
}
};
}
]);
Ok - the issue was actually with my template. I had modified the partial from the sample to be:
<div ng-controller="ModalInstanceCtrl">
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
</div>
While in fact I needed to remove the ng-controller reference.
<div>
<div class="modal-header">
<h3>I am a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
</div>
I still feel like I am stumbling around with Angular but this seemed to do the trick!
As shown in modal example angular ui, you don't have to specify the ng-controller element. You can specify the controller attribute when defining the modal.
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
resolve: {
items: function () {
return $scope.items;
},
dataModel: function () {
return $scope.data;
}
}
});