angularjs bootstrap modal not loading template - angularjs

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.

Related

How to avoid modal to reload controller again?

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

AngularJS Modal Popup

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

why does my bootstrap modal not open?

I have defined a bootstrap 3 modal in my code:
<script type="text/ng-template" id="modalTmpl">
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button ng-click="close()" type="button" class="close" data-dismiss="modal" aria-hidden="false">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</script>
<div ng-controller="ModalDemoCtrl">
<modal></modal>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
This is my angular code:
app.directive('modal', function($log) {
return {
restrict: 'E',
templateUrl: 'modalTmpl',
link: function(scope, element, attrs) {
self.element = element;
scope.close = function() {
$log.info('close!');
var modal = self.element.find('.modal');
//debugger;
modal.removeClass('show');
}
},
controller: function($scope, $attrs) {
}
};
var ModalDemoCtrl = function ($scope, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
};
};
When I click on open me it does not show the modal: ( Could it be the wrong bootstrap.css reference or something else?
plunkr :http://plnkr.co/edit/RhaUdB?p=preview
Why not try this by assigning modalTmpl id to your model
<button class="btn" ng-click="open()" data-toggle="modal" data-target="#modalTmpl">Open me!</button>
Try this in your modal template:
<div modal="isProductShowing" close="hideFullProduct()" options="productModalOptions">
Then in the controller:
$scope.isProductShowing = false;
$scope.currentFullProduct = null;
$scope.productModalOptions = {
backdropFade: true,
dialogFade:true
};
$scope.showFullProduct = function (productId) {
$scope.isProductShowing = true;
$scope.currentFullProduct = _.findWhere($scope.products, { id: productId });
}
Then you have to trigger the showFullProduct function from the main template:
<li ng-click="showFullProduct(product.productId)">
There is a lot of issues with this code.
First, your ModalDemoCtrl is not defined. Second, your open function is not defined. I move the button the MainCtrl to show how it can works. And declare open function to set the show to true which will be used in ng-show directive
http://plnkr.co/edit/uP3xB7?p=preview
<div type="text/ng-template" ng-show="show" id="modalTmpl">
<!-- Modal box -->
</div>
$scope.open = function() {
$scope.show = true;
};

can't use resolve data in modal

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

How to add/remove DOM elements in AngularJS?

I want to show simple message modal dialogs (bootstrap modal dialogs).
The dialog is a piece of HTML:
<div class="dlg">.....</div>
How can I add this piece of HTML into the DOM tree when I want to show a dialog and remove it when dialog is closed?
Obviously, this should be done in a directive. But how can I call the 'ShowDialog()' method of a directive in a controller's button click handler?
As the comment says, pass through $modal in your DI, check out the example: http://angular-ui.github.io/bootstrap/#/modal
<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>
</div>
JS:
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function (size) {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 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');
};
};,
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
};

Resources