Question

我有一个Angular控制器，其中包含一个变量，用于控制是否使用div显示ng-show：

myApp.controller("myController", function($scope){

  $scope.flag = false;

  $scope.changeFlag = function(){
    console.log("function is called");
    $scope.flag = !$scope.flag;
  };

});

我添加了一个指令，用于侦听escape键上的键击，然后在检测到键盘后调用$scope.changeFlag()函数。

myApp.directive("closeIt", function(){
  return{
    restrict: "A",
    link: function(scope, element, attrs){
      element.bind("keyup", function(event){
        if(event.which == 27){
          console.log("escape has been pressed");
          scope.changeFlag();
        }
      });
    }
  }
});

这两件事情在下面的HTML中汇集在一起：

<!DOCTYPE html>
<html ng-app="myApp">
  <body ng-controller="myController" close-it>
    <div ng-show="flag">
      Something here
    </div>
    <button type="button" ng-click="changeFlag()">
      This works
    </button>
  </body>
<html>

我将$scope.changeFlag()函数绑定到一个按钮，这可以按预期工作。当我按下键盘的escape键时，将调用指令和控制器功能中的控制台日志消息。 $scope.flag也发生了变化。但我的div元素没有显示/隐藏。

这是Angular中的错误吗？如果是这样，有没有办法解决它？

Plunkr example

Answer 1

Plunker Here

将'keyup'处理程序包装在$ apply中。绑定到jQuery事件时，可以调用$ apply来让angular知道触发$ digest循环。

myApp.directive("closeIt", function(){
  return{
    restrict: "A",
    link: function(scope, element, attrs){
      element.bind("keyup", function(event){
        scope.$apply(function() {
        if(event.which == 27){
          console.log("escape has been pressed");
          scope.changeFlag();
        }

        });
      });
    }
  }
});

Angular JS - 指令调用函数的键绑定但不影响Ng-Show状态

1 个答案: