I've created an Angular directive that is supposed to close a modal when the escape key is pressed. The modal service works just fine when used within controllers, but for some reason it doesn't work within this directive. The following code will print hello when escape is pressed but it will not hide the modal. Any ideas?
DIRECTIVE
app.directive("dpEscape", function(modal) {
return function(scope, element, attributes) {
element.on("keyup", function(event) {
if (event.keyCode == 27) {
console.log("hello");
modal.hide();
}
});
};
});
I don't actually think any of the following code is relevant to the problem, but I could be wrong. Since I know people are going to ask for it anyways, here it is:
HTML
...
<html ng-app="trread" ng-controller="Main" dp-escape>
...
SERVICE
app.factory("modal", function() {
var urlPath = "/templates/modals/";
var visible = false;
var templateUrl = "";
var content = {};
var controller = {};
var size = {width: 500, height: 500};
var show = function() {
visible = true;
}
var hide = function() {
visible = false;
}
var setTemplate = function(url) {
templateUrl = urlPath + url + ".html";
}
var getTemplate = function() {
return templateUrl;
}
var setContent = function(contentObj) {
content = contentObj;
}
var getContent = function() {
return content;
}
var setController = function(controllerObj) {
controller = controllerObj;
}
var getController = function() {
return controller;
}
var isVisible = function() {
return visible;
}
return {
show: show,
hide: hide,
setTemplate: setTemplate,
getTemplate: getTemplate,
setContent: setContent,
getContent: getContent,
setController: setController,
getController: getController,
isVisible: isVisible,
};
});
I've created an Angular directive that is supposed to close a modal when the escape key is pressed. The modal service works just fine when used within controllers, but for some reason it doesn't work within this directive. The following code will print hello when escape is pressed but it will not hide the modal. Any ideas?
DIRECTIVE
app.directive("dpEscape", function(modal) {
return function(scope, element, attributes) {
element.on("keyup", function(event) {
if (event.keyCode == 27) {
console.log("hello");
modal.hide();
}
});
};
});
I don't actually think any of the following code is relevant to the problem, but I could be wrong. Since I know people are going to ask for it anyways, here it is:
HTML
...
<html ng-app="trread" ng-controller="Main" dp-escape>
...
SERVICE
app.factory("modal", function() {
var urlPath = "/templates/modals/";
var visible = false;
var templateUrl = "";
var content = {};
var controller = {};
var size = {width: 500, height: 500};
var show = function() {
visible = true;
}
var hide = function() {
visible = false;
}
var setTemplate = function(url) {
templateUrl = urlPath + url + ".html";
}
var getTemplate = function() {
return templateUrl;
}
var setContent = function(contentObj) {
content = contentObj;
}
var getContent = function() {
return content;
}
var setController = function(controllerObj) {
controller = controllerObj;
}
var getController = function() {
return controller;
}
var isVisible = function() {
return visible;
}
return {
show: show,
hide: hide,
setTemplate: setTemplate,
getTemplate: getTemplate,
setContent: setContent,
getContent: getContent,
setController: setController,
getController: getController,
isVisible: isVisible,
};
});
-
Not so sure reading this code, but try to wrap the if (on the directive) in a
scope.$apply()– Jesus Rodriguez Commented Feb 9, 2014 at 22:21 - Good, I added a proper response then. – Jesus Rodriguez Commented Feb 10, 2014 at 0:28
1 Answer
Reset to default 5Since classic events like click, keydown, etc are not managed by Angular but by the browser. If you modify your $scope inside of one of those events, you need to tell Angular that something have happened outside is context. That is the $apply. With $apply you can run things outside Angular context and make Angular aware when needed.