Have problem sending data to modal with resolve.
I have this template:
<div class="split wrapper" ng-app="myApp" ng-controller="appCtr">
<script type="text/ng-template" id="tablesModal">
<div class="modal-header modal-header-primary">
<h4 class="modal-title">{{ test }}</h4>
</div>
<div class="modal-body tables-list">
<ul>
</ul>
</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>
</div>
controller:
var app = angular.module('myApp.controllers', ['ui.bootstrap']);
app.controller('appCtr', ['$scope', '$modal', function($scope, $modal) {
$scope.openCT = function(size){
var modalInstance = $modal.open({
templateUrl: 'tablesModal',
controller : 'appCtr',
size: size,
resolve: {
test: function(){
return 'example';
}
}
});
}
}]);
but i nothing shows in modal title..
What am i doing wrong here?
resolve() function is called when dialog is closed and modal data is passed then() handler.
To fix issue add test in scope:
$scope.test = "Modal Title";
Related
I want to add model dialog in my project.
My html code is like:
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button class="btn" ng-click="open()">Open Modal</button>
<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
And My app.js is like this:
var app = angular.module("MyApp", ["ui.bootstrap.modal"]);
app.controller("bodyController", function($scope) {
$scope.open = function() {
$scope.showModal = true;
};
$scope.ok = function() {
$scope.showModal = false;
};
$scope.cancel = function() {
$scope.showModal = false;
};
});
I have added angular UI Bootstrap JS in my index.html file.Still I am not getting model dialog. I am getting an error which i am getting.
My error is like:
Can anyone suggest me how to do resolve this error.
This is an example for bootstrap modal. I think the way you are trying to do where you are not using bootstrap classes
There are quite a few issues in your code, so better try the sample and develop as you need
<button data-toggle="modal" data-target="#test">CLick</button>
<div class="modal fade" id="test" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Refer below.. This will help you.
var app = angular.module("MyApp", ["ui.bootstrap"]);
app.controller("bodyController", function($scope,$uibModal) {
$scope.open = function() {
var modalInstance = $uibModal.open({
animation:true,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
template: `<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
</div>
<div class="modal-body">
<p>Example paragraph with some text.</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>
</div>
</div>`,
size: 'sm',
controller:'modalCtrl',
resolve: {
items: function () {
// return $ctrl.items;
}
}
});
modalInstance.result
.then(function (result) {
console.log('okay');
},
function (result) {
console.log('cancel');
});
};
});
app.controller('modalCtrl', function($scope,$uibModalInstance){
$scope.ok = function() {
$uibModalInstance.close();
};
$scope.cancel = function() {
$uibModalInstance.dismiss();
};
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script>
<body ng-app="MyApp">
<div ng-controller="bodyController">
<!-- This html would live at the path specified in the controller: path/to/your/modal-template.html -->
<button style="margin:20px" class="btn" ng-click="open()">Open Modal</button>
</div>
</body>
When initialize my controller and page, I'll send some data to third party server. I have a button which triggers a modal. When user clicks the button, my controller is initialized again so the data is sent again. How to avoid it?
View:
View:
<button id="sendEmailButton" type='button'ng-click="sendEmail()"</button>
Controller:
$scope.sendEmail = function() {
$modal.open({
templateUrl: 'sendEmail.html'
});
}
```
Sample modals from ui-bootstrap documentation. As you can see modals get their own controller separate from the main view. This should solve your issue.
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">
{{ item }}
</li>
</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>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
Javascript:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
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());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $uibModalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
angular.module('ui.bootstrap.demo').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');
};
});
its seems like your using the same controller for
I have a bootstrap modal popup which I fill with data from my modalcontroller. After I filled it with data I would like to show it. To be able to show the modalpopup straight away when going into the page I would like to trigger it directly. Right now I have a button which does that, but how can I do it automatic in a proper way?
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog" ng-init="getAllItems()">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="">
<form class="form-horizontal" name="form" role="form">
<div ng-repeat="item in items">
<input type="radio" name="fundselector" ng-model="item" ng-value="item"/> {{item}} <br />
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My controller:
angular.module("Modal")
.controller("ModalController",
[
"$scope", "$rootScope", "$location", "ModalService", "AuthenticationService",
function ($scope, $rootScope, $location, ModalService, AuthenticationService) {
AuthenticationService.GetCurrentWindowsUser(function(username) {
$scope.username = username;
});
$scope.getAllItems = function () {
AuthenticationService.GetCurrentWindowsUser(function (username) {
if (username) {
AuthenticationService.GetItems(username, function (items) {
$scope.items = items;
//Trigger modalpopup here
});
}
});
}
}
]);
Don't use jquery, use angular-ui.
https://angular-ui.github.io/bootstrap/#/modal
You can open the modal programmatically like below, and pass your data in in the resolve. This is copy and pasted straight from their example.
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
Find element by angular.element and hide.
var popup = angular.element("#modal-default");
//for hide model
popup.modal('hide');
//for show model
popup.modal('show');
Try something like this -
$('#yourModalId').modal('show');
To fix your example, I created a service that would open the modal and attached it to the outer controller and the modal controller. I had to remove the "modal" class from the modal because it had a display:none attribute on it. Here is a fiddle that shows what I did. However, #mgiesa's answer is better.
I'm really new to Angular. I'm trying to recreate the modal sample at this link https://angular-ui.github.io/bootstrap/ I am having no luck with it! I created a plunker http://plnkr.co/edit/018Ed7RG3Y0GoAlK7a14?p=catalogue I just need to be able to open a modal on a button click. I'm getting the error message Error: [ng:areq] Argument 'ModalDemoCtrl' is not a function, got undefined
Here's my view
<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">
{{ item }}
</li>
</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>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
Here's my controller:
angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']);
angular.module('crm.ma').controller('ModalDemoCtrl', ModalDemoCtrl, function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
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());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
angular.module('crm.ma').controller('ModalInstanceCtrl', 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');
};
});
Here's a corrected fork of your plunk: http://plnkr.co/edit/6djuhA8ohMkrWW7zohg1?p=preview.
You just had some minor syntax errors.
JAVASCRIPT
var app = angular.module('crm.ma', ['ngAnimate', 'ui.bootstrap']);
app.controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.animationsEnabled = true;
$scope.open = function (size) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
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());
});
};
$scope.toggleAnimation = function () {
$scope.animationsEnabled = !$scope.animationsEnabled;
};
});
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.
app.controller('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');
};
});
HTML
<!DOCTYPE html>
<html data-ng-app="crm.ma">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<script src="ModalDemoCtrl.js"></script>
</head>
<body>
<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">
{{ item }}
</li>
</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>
<button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
You need to fix this line:
angular.module('crm.ma').controller('ModalDemoCtrl', ModalDemoCtrl, function ($scope, $uibModal, $log) {
// what is this, huh? ------------------------------------^
Correct code:
angular.module('crm.ma').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {
You have similar problem with ModalInstanceCtrl.
You also missing ng-app="crm.ma" attribute.
Demo: http://plnkr.co/edit/VDhDAHM2beVtYYsJBXoi?p=preview
I'm new to angular and I'm trying to get a modal to display. I've been using https://angular-ui.github.io/bootstrap/#/modal as a reference but for some reason it wont load the template content.
At this stage The code is just a copy paste from the above link but its still not working
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');
};
};
And the html looks like
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Im 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>
</div>
I'm using the latest version of everything.
Any help greatly appreciated.