I am having an issue refreshing/updating an angular directive. Basically there is a Flag button which will make an async call to server and if it's successful, change the property userFlags which should disable the button and change it's text to "Flagged...".
Here is the directive:
app.directive('flagable', function() {
return {
restrict: 'E',
scope: { item: '=' },
templateUrl: '/Content/templates/flagable.tmpl',
controller: function($scope) {
$scope.flag = function () {
$scope.$apply(function () {
// ITS NOT GOING IN HERE!
//AJAX CALL HERE
model.$modelValue.userFlags = [];
Messenger().post("Your request has succeded! ");
});
};
}
};
});
Here is the template:
<div class="btn-group pull-right">
<button class="btn btn-small btn-danger" ng-disabled="{{item.userFlags != null}}"><i class="icon-flag"></i>
<any ng-switch="item.userFlags==null">
<any ng-switch-when="true">Flag</any>
<any ng-switch-when="false">Flagged...</any>
</any>
</button>
<button class="btn btn-small btn-danger dropdown-toggle" data-toggle="dropdown" ng-disabled="{{item.userFlags != null}}"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Inappropriate</li>
<li>Overpost</li>
<li>Spam</li>
</ul>
</div>
Interestingly enough, changing the controller logic to:
$scope.flag = function () {
$scope.item.userFlags = [];
Messenger().post("Your request has succeded! " + $scope.item.viewCount);
};
Causes for the button to refresh properly to "Flagged..." however, the ng-disabled its not making the button disabled! In firebug its showing that the ng-disabled property is set:
ng-disabled="true"
you need to assign scope item as '&'
var app = angular.module('app', []);
app.directive('flagable', function() {
return {
restrict: 'E',
scope: { item: '&' },
templateUrl: 'flagable.tmpl',
controller: function($scope) {
$scope.flag = function()
{
$scope.item.userFlags = [];
};
}
};
});
app.controller('appController', function($scope){
$scope.item ={};
//$scope.item.userFlags = null;
});
and ng-disable should have value like this because item object is already present in controller
ng-disabled="item.userFlags != null
Working demo present here
http://plnkr.co/edit/zvO24fb082hiyeinWmQi?p=preview
HTML PAGE:
<html ng-app="app">
<head>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#2.3.2" data-semver="2.3.2" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<h1>Hello Plunker!</h1>
<flagable item="item" flag="flag(item)"></flagable>
</body>
</html>
Controller and directive:
var app = angular.module('app', []);
app.directive('flagable', function() {
return {
restrict: 'E',
scope: { item: '=', flag: '&' },
templateUrl: 'flagable.tmpl'
};
});
app.controller('appController', function($scope){
$scope.item ={};
$scope.flag = function(item)
{
//call service to set flag here
item.userFlags = [];
};
});
template page
<div class="btn-group pull-right">
<button class="btn btn-small btn-danger" ng-disabled="item.userFlags != null"><i class="icon-flag"></i>
<any ng-switch="item.userFlags==null">
<any ng-switch-when="true">Flag</any>
<any ng-switch-when="false">Flagged...</any>
</any>
</button>
<button class="btn btn-small btn-danger dropdown-toggle" data-toggle="dropdown" ng-disabled="item.userFlags != null"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Inappropriate</li>
<li>Overpost</li>
<li>Spam</li>
</ul>
</div>
Related
I have a simple slideshow. I introduced a new scope variable called 'isLoading'. The idea is to disable the Next button until the image is fully loaded. However the Next button remains disabled. The UI is not detecting that the scope variable has changed.
<html>
<link rel="stylesheet" href="bootstrap.min.css">
<script src='angular.min.js'></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.slides = [
{filename : 'Slide5.jpg', type : 'image'},
{filename : 'Slide1.PNG', type : 'image'},
];
$scope.page = 0;
setCurrentSlide();
$scope.previous = function() {
$scope.page--;
setCurrentSlide();
};
$scope.next = function() {
$scope.page++;
setCurrentSlide();
};
$scope.completed = function() {
alert('done');
};
function setCurrentSlide() {
$scope.isLoading = true;
$scope.currentSlide = $scope.slides[$scope.page];
}
});
app.directive('imgloader', [function () {
return {
restrict: 'A',
link: function (scope, ele) {
ele.bind('load', function () {
scope.isLoading = false;
});
}
};
}]);
</script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="slidecontainer">
<img imgloader ng-if="currentSlide.type == 'image'" src='{{currentSlide.filename}}'/>
<video ng-if="currentSlide.type == 'video'" controls>
<source src="{{currentSlide.filename}}"/>
</video>
</div>
</div>
<div class="controlscontainer">
<span class="slidenumbers">Slide {{page+1}} / {{slides.length}}</span>
<button ng-click="previous()" ng-disabled="page <= 0" class="btn btn-lg btn-primary">Previous</button>
<button ng-click="next()" ng-disabled="isLoading || page >= slides.length-1" class="btn btn-lg btn-primary">Next</button>
<button ng-click="completed()" ng-disabled="page != slides.length-1" class="btn btn-lg btn-success">Complete</button>
</div>
</body>
</html>
You are mixing the scope of your directive with the $scope of your controller:
notice that this 2 reffer to different contexts scope.isLoading !== $scope.isLoading
instead you colud try:
<img ng-load="isLoading = false" ng-if="currentSlide.type == 'image'" src='{{currentSlide.filename}}'/>
Where isLoading referes to the property on the $scope of your controller
I am new to Angular JS. I started learning Angular JS today. Before I was using jQuery and Bootstrap for front-end. Now I want to show Bootstrap dialog box using AngularJS. I found this, https://angular-ui.github.io/bootstrap/.
But there are so many things difficult for beginners to understand. How can I correct my code to show bootstrap dialog?
This is my code
<html>
<head>
<title>Angular</title>
<link rel="stylesheet" href="http://localhost:8888/angular/bootstrap.css"></link>
<script src="http://localhost:8888/angular/angular-js.min.js"></script>
<script src="http://localhost:8888/angular/angular-js.animate.min.js"></script>
<script src="http://localhost:8888/angular/angular-js.sanitize.min.js"></script>
<script src="http://localhost:8888/angular/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<div ng-controller="ModalDemoCtrl as $ctrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<ul>
<li ng-repeat="item in $ctrl.items">
{{ item }}
</li>
</ul>
Selected: <b>{{ $ctrl.selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="$ctrl.open()">Open me!</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.open('sm')">Small modal</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.toggleAnimation()">Toggle Animation ({{ $ctrl.animationsEnabled }})</button>
<button type="button" class="btn btn-default" ng-click="$ctrl.openComponentModal()">Open a component modal!</button>
<div ng-show="$ctrl.selected">Selection from a modal: {{ $ctrl.selected }}</div>
</div>
</body>
<script>
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($uibModal, $log) {
var $ctrl = this;
$ctrl.items = ['item1', 'item2', 'item3'];
$ctrl.animationsEnabled = true;
$ctrl.open = function (size) {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
$ctrl.openComponentModal = function () {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
component: 'modalComponent',
resolve: {
items: function () {
return $ctrl.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
$log.info('modal-component dismissed at: ' + new Date());
});
};
$ctrl.toggleAnimation = function () {
$ctrl.animationsEnabled = !$ctrl.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 ($uibModalInstance, items) {
var $ctrl = this;
$ctrl.items = items;
$ctrl.selected = {
item: $ctrl.items[0]
};
$ctrl.ok = function () {
$uibModalInstance.close($ctrl.selected.item);
};
$ctrl.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});
// Please note that the close and dismiss bindings are from $uibModalInstance.
angular.module('ui.bootstrap.demo').component('modalComponent', {
templateUrl: 'myModalContent.html',
bindings: {
resolve: '<',
close: '&',
dismiss: '&'
},
controller: function () {
var $ctrl = this;
$ctrl.$onInit = function () {
$ctrl.items = $ctrl.resolve.items;
$ctrl.selected = {
item: $ctrl.items[0]
};
};
$ctrl.ok = function () {
$ctrl.close({$value: $ctrl.selected.item});
};
$ctrl.cancel = function () {
$ctrl.dismiss({$value: 'cancel'});
};
}
});
</script>
</html>
But my code is not working. There are too many options I do not know in this for example "myModalContent.html" is from where? Would you explain step by step to show Bootstrap dialog box in AngularJS?
I tried this way as well
<html>
<head>
<title>Angular</title>
<script src="angular-js.min.js"></script>
<script src="angular-js.animate.min.js"></script>
<script src="angular-js.sanitize.min.js"></script>
<script src="angular-js.touch.min.js"></script>
<script src="bootstrap.ui.js"></script>
<link href="bootstrap.css" rel="stylesheet">
</head>
<body ng-app="MyApp" ng-controller="MyCtrl">
<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>
</body>
<script>
var app = angular.module("MyApp",["ui.bootstrap.modal"]);
app.controller('MyCtrl',function($scope){
$scope.open = function() {
$scope.showModal = true;
};
})
</script>
</html>
It shows like this:
It is not working as well. How can I show bootstrap dialog in AngularJS?
You don't have a ctrl.open function although you ref one in your ng-click.
Maybe you can try this?
$ctrl.open = function (size) {
var modalInstance = $uibModal.open({
animation: $ctrl.animationsEnabled,
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
controllerAs: '$ctrl',
size: size,
resolve: {
items: function () {
return $ctrl.items;
}
}
});
open() method returns a modal instance. This is what actually creates the modal on your template.
templateurl is a path to your template. Here, its looking for myModalContent.html in the same path as your controller code. You need to create and design the template and that will get loaded when this modal is called in your view.
template can be used here instead of templateurl for inline HTML if you do not have enough HTML. "enough" is subjective to your understanding.
controller is the name of your controller. You can define it as you like.
controllerAs is the alias of your controller. You can define it to be what you like too. $ctrl is the alias of your controller by default. If you remove the controllerAs option from here, you can still use $ctrl in your template. Although, using this requires you to have controller option provided.
animationsenabled is a boolean value which can be used to toggle modal animation in your view by toggling the animation property. Default is false.
resolve helps create a $resolve object on the opened modal. This helps provide all resolved values from your items. Its basically a configuration on the $routeprovider service of Angular. To help understand $resolve better, you can have a look at this
Since you are new to Angular, much like me, a great place to start would be to understand Services in Angular. Its going to be one of your most used feature.
Moreover, you can check out plunker of the above code, edit it and understand the functioning. I tried it yesterday for the first time too.
Also, add angular-ui as a tag to your question so the angular-ui guys can get involved.
Hope this helps in some way.
As I am a newbie in angular with typescript I am facing a issue while implemented angular modal popup. The issue is I have one drop-down on which change I have to open a modal popup and that modal popup will have two buttons "Yes" or "No". For this I have one controller where I have injected a dependency.
export class QuestionnaireController {
static ngControllerName = 'questionnaireController';
static inject = ["$uibModal"];
constructor(private $uibModal: ng.ui.bootstrap.IModalService) {
}
public openModalPopup() {
let options: ng.ui.bootstrap.IModalSettings = {
controller: QuestionnaireController,
controllerAs:'ctrl',
templateUrl: 'app/views/Dialogbox.html',
};
this.$uibModal.open(options);
}
}
Most of my code is written in 'QuestionnaireController' and the popup is getting open using this controller but I also want to close this popup so I read a article where it was written that I have to created a new controller "ModalController " to make popup close.
export class ModalController {
static inject = ["$uibModalInstance"];
constructor(private $uibModalInstance: ng.ui.bootstrap.IModalServiceInstance) {
}
public close() {
this.$uibModalInstance.close();
}
}
Popup code is here...
<div ng-app="" id="dvModal">
<div class="modal-header">
</div>
<div class="modal-body">
<p> Evaluated result will be discarded if you continue. Are you sure you want to continue?</p>
</div>
<div class="modal-footer">
<input id="yesBtn" type="button" class="btn btn-default" ng-click="ctrl.Yes('true')" value="Yes" />
<input id="npBtn" type="button" class="btn btn-default" ng-click="ctrl.close()" value="No" />
</div>
and to close this passed Controller : ModalController in options which makes my popup closed on click of "No". But now the issue is generated here, how I again went to "QuestionnaireController" to do "Yes" functionality as "Yes" functionality is written in QuestionnaireController.
Yes, you can!
$uibModal is super flexible tool.
I'm not super familiar with Typescript, but here's my JS solution:
angular
.module('appName', ['ui.bootstrap'])
.controller('SomePageController', ['$scope', '$uibModal', '$log',
function ($scope, $uibModal, $log) {
First you want to do, is to change your openModalPopup() method:
// Instantiate the modal window
var modalPopup = function () {
return $scope.modalInstance = $uibModal.open({
templateUrl: 'blocks/modal/dialog.html',
scope: $scope
});
};
// Modal window popup trigger
$scope.openModalPopup = function () {
modalPopup().result
.then(function (data) {
$scope.handleSuccess(data);
})
.then(null, function (reason) {
$scope.handleDismiss(reason);
});
};
// Close the modal if Yes button click
$scope.yes = function () {
$scope.modalInstance.close('Yes Button Clicked')
};
// Dismiss the modal if No button click
$scope.no = function () {
$scope.modalInstance.dismiss('No Button Clicked')
};
// Log Success message
$scope.handleSuccess = function (data) {
$log.info('Modal closed: ' + data);
};
// Log Dismiss message
$scope.handleDismiss = function (reason) {
$log.info('Modal dismissed: ' + reason);
}
}
]);
Second - modal window HTML template will look like this:
<script type="text/ng-template" id="blocks/modal/dialog.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>
Third - pretty simple SomePage HTML (in your case - Questionnaire) View example :
<div ng-controller="SomePageController">
<button type="button" class="btn btn-default" ng-click="openModalPopup()">Open modal</button>
</div>
All together:
angular
.module('appName', ['ui.bootstrap'])
.controller('SomePageController', ['$scope', '$uibModal', '$log',
function($scope, $uibModal, $log) {
$scope.modalPopup = function() {
modal = $uibModal.open({
templateUrl: 'blocks/modal/dialog.html',
scope: $scope
});
$scope.modalInstance = modal;
return modal.result
};
$scope.modalPopupTrigger = function() {
$scope.modalPopup()
.then(function(data) {
$scope.handleSuccess(data);
},function(reason) {
$scope.handleDismiss(reason);
});
};
$scope.yes = function() {
$scope.modalInstance.close('Yes Button Clicked')
};
$scope.no = function() {
$scope.modalInstance.dismiss('No Button Clicked')
};
$scope.handleSuccess = function(data) {
$log.info('Modal closed: ' + data);
};
$scope.handleDismiss = function(reason) {
$log.info('Modal dismissed: ' + reason);
}
}
]);
<!DOCTYPE html>
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="appName">
<div ng-controller="SomePageController">
<script type="text/ng-template" id="blocks/modal/dialog.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Modal content
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="yes()">Yes</button>
<button class="btn btn-warning" type="button" ng-click="no()">No</button>
</div>
</script>
<button type="button" class="btn btn-default" ng-click="modalPopupTrigger()">Open modal</button>
</div>
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.7/angular-animate.min.js"></script>
<script src="https://raw.githubusercontent.com/angular-ui/bootstrap-bower/master/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
Well, if you are that lazy guy like me, the following will also work ;)
var objects = [{
name: "obj1",
value: 1
}, {
name: "obj2",
value: 2
}];
// Generating the modal html
var html = "<div class='modal-header'><h4 class='modal-title'>Select Object</h4></div>";
html += "<div class='modal-body'>";
html += "<select class='form-control' ng-model='selection'>";
for (var i = 0; i < objects.length; i++) {
var ob = objects[i];
html += "<option value='" + ob.value + "'>" + ob.name + "</option>";
}
html += "</select>";
html += "</div>";
html += "<div class='modal-footer'>";
html += '<button type="button" ng-click="dismissModal()" class="btn btn-default" >Close</button>';
html += '<button type="button" ng-click="closeModal()" class="btn btn-primary">Select</button>';
html += "</div>";
// Showing the modal
var objectSelectionModal = $uibModal.open({
template: html,
controller: function($scope) {
// The function that is called for modal closing (positive button)
$scope.closeModal = function() {
//Closing the model with result
objectSelectionModal.close($scope.selection);
};
//The function that is called for modal dismissal(negative button)
$scope.dismissModal = function() {
objectSelectionModal.dismiss();
};
}
});
//Processing the Result
objectSelectionModal.result.then(function(selected) {
alert(selected);
});
I am trying to learn angular ui and copy pasted a demo from their website into a jsfiddle. For some reason it's not working and not giving an error. Can anybody see what I am doing wrong?
If you go into the jsfiddle below and then click the open button nothing happens and there is no error.
JSfiddle: http://jsfiddle.net/baswg1wz/1/
Javascript:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('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.
angular.module('ui.bootstrap.demo').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
<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>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
It's not giving any errors because you didn't bootstrap your Angular application. You should wrap your entire html in a div (in a real page you should do this on the html or body tag) and then use the ng-app attribute to initialize/bootstrap your application:
<div ng-app="ui.bootstrap.demo">
<!-- your html -->
</div>
Also i noticed you didn't include the right ui library, you're using:
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
You should be using: (also note the http://)
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
Furhermore, when using Angular in JSFiddle you should use the no wrap - in <head> option.
That should get you a lot further, but i would recommend using Plunker, if you checked the modal example on the ui.bootstrap site you could have noticed the blue Edit in plunker on the topright of the code, try clicking that.
http://angular-ui.github.io/bootstrap/#/modal
plunker: http://plnkr.co/edit/CrvOFHSfGnXFFWbaXNxn?p=preview
It seems scope for modal is not disposed of after closing the dialog. I have directive that emits when certain div is available, and modal controller receives it. It works fine on first open and close, one emit one receive. On 2nd dialog open and close, one emit and two receives, showing that there are two controller instances, and it goes on for any subsequent dialog open and close.
Is there anyway to make sure to dispose controller scope after modal dialog is dismissed?
html:
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.2.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</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" my-hook>
<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>
</body>
</html>
js:
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('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.
angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, $rootScope, items) {
$scope.items = items;
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
$modalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
$rootScope.$on ('MyTestHook', function(event) {
console.log("MyTestHook received");
});
});
angular.module('ui.bootstrap.demo').directive('myHook', function($timeout,$rootScope) {
function link(scope,element,attrs) {
$timeout(function(){
scope.$root.$emit("MyTestHook");
},500);
}
return {
link: link
};
});
This is not the problem of Modal. Modal scope is destroyed completely on dismiss.
Problem is in the code as you have attached $on on $rootScope so every time you click on model it add new listener in $$listeners and listener's count increased by one because $rootscope doesn't get disposed.
$rootScope.$on ('MyTestHook', function(event) { //every call to open modal will add new listener in rootscope
console.log("MyTestHook received");
});
To avoid this use attach $on on scope that disposed on modal dismiss.
See below debugger image.
http://plnkr.co/edit/iR7rGCFgIchsk4sBg26Q?p=preview