Question

我创建了一个Angular指令，该指令应该在按下转义键时关闭一个模态。模态服务在控制器中使用时工作正常，但由于某种原因，它在该指令中不起作用。按下转义时，以下代码将打印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,
  };

});

Answer 1

由于click，keydown等经典事件不是由Angular管理，而是由浏览器管理。如果您在其中一个事件中修改了$scope，则需要告诉Angular外部发生的事情是上下文。那是$apply。使用$apply，您可以在Angular context之外运行内容，并在需要时让Angular知道。

使用转义键关闭模态的Angular指令

1 个答案: