Question

我知道之前已经提出了类似的问题，并且我已经完成了很多工作，但作为初学者，我仍然不会让我的代码工作。我有一个羽毛here。我的最终目标是为我可能希望在不同页面使用的模板设置键盘快捷键的“监听器”。在“输入”时，它应该处理输入，但它不会。单击按钮可以正常工作。

我的身体看起来很容易：

<body ng-controller="BoxController as box" ng-keyup="box.checkKey($event)">
  <div ui-view="content"></div>
</body>

我的app.js

(function() {
  var app = angular.module('boxApp', ['ui.router']);

  app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/');

      $stateProvider
        .state('app', {
          url: '/',
          views: {
            'content': {
              template: '<my-box></my-box>',
              controller: 'BoxController as box'
            }
          }
        })
    }
  ]); 

  app.controller('BoxController', function($scope) {
    $scope.userEntry = {txt: 'ye'};

    this.checkInput = function() {
      if ($scope.userEntry.txt == "yeah") { alert("Bingo!"); } 
      else alert("Uh oh: " + $scope.userEntry.txt);
    };

    this.checkKey = function(keyEvent) {
      if (keyEvent.which == 13) { this.checkInput(); }
    };
  });

  app.directive('myBox', function() {
    return {
      restrict: 'E',
      template: '<input type="text" ng-model="userEntry.txt"><button ng-click="box.checkInput()"> Check </button>',
    };
  });

})();

我确定我有一些范围访问问题，但我自己无法弄明白。另外：我怀疑将checkKey放到一种主控制器上并且不将BoxController包含在主体上的所有页面上是有意义的。任何帮助将不胜感激。提前谢谢！

Answer 1

我会在指令中做所有这些以保持关注点的分离。

app.directive('myBox', function() {
  return {
    restrict: 'E',
    template: '<input type="text" ng-model="userEntry.txt"><button ng-click="checkInput()"> Check </button>',
    controller: function($scope, $document){

      $scope.userEntry = {
        txt: ''
      };

      $document.bind('keydown keypress', function(event){
        if(event.which === 13) {
         $scope.checkInput(); 
        }
      });

      $scope.checkInput = function() {
        if ($scope.userEntry.txt == "yeah") {
          alert("Bingo!");
        } else alert("Uh oh: " + $scope.userEntry.txt);
      };
    }
  };
});

http://plnkr.co/edit/gaNbeECuiOQleJujegVW?p=preview

ui-router和指令的范围问题

1 个答案: