logo标签列表

使用Angular指令通过按下Esc键关闭模态框

javascriptangularjsangularjs-directiveangular-uiangular-ui-bootstrap
3
我创建了一个Angular指令，它应该在按下Escape键时关闭模态框。当它在控制器中使用时，模态框服务很好地工作，但是由于某些原因，在此指令中不起作用。以下代码将在按下Escape键时打印 "hello"，但它不会隐藏模态框。有什么想法吗？ 指令 
app.directive("dpEscape", function(modal) {
  return function(scope, element, attributes) {
    element.on("keyup", function(event) {
      if (event.keyCode == 27) {
        console.log("hello");
        modal.hide();
      }
    });
  };
});

我认为以下代码实际上与问题无关，但我可能是错的。既然我知道人们无论如何都会要求它，那么这里就是：

HTML 
...
<html ng-app="trread" ng-controller="Main" dp-escape>
...

服务

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

});
不太确定阅读这段代码，但尝试将if语句（在指令中）包装在scope.$apply()中。 - Jesus Rodriguez
好的，我已经添加了一个适当的响应。 - Jesus Rodriguez
1个回答
5

由于像click、keydown等传统事件不是由Angular管理而是由浏览器管理的。如果您在其中一个事件中修改了您的$scope，那么您需要告诉Angular有些事情发生在其上下文之外。这就是$apply。使用$apply可以在Angular上下文之外运行，并在需要时使Angular知道。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接