admin管理员组

文章数量:1391925

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,
  };

});
  • javascript
  • angularjs
  • angularjs-directive
  • angular-ui
  • angular-ui-bootstrap
Share Improve this question edited Feb 14, 2014 at 10:03 Nick K 3891 gold badge3 silver badges18 bronze badges asked Feb 9, 2014 at 21:57 David JonesDavid Jones 10.3k30 gold badges93 silver badges146 bronze badges 2
  • 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
Add a ment  | 

1 Answer 1

Reset to default 5

Since 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.

本文标签： javascriptAngular directive to close a modal with the escape keyStack Overflow

版权声明：本文标题：javascript - Angular directive to close a modal with the escape key - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744705905a2620842.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。