ui-路由器和指令的范围问题

Question

我知道以前也有人提出过类似的问题，我已经解决了很多问题，但作为初学者，我仍然无法让我的代码正常工作。我有一个笨蛋 here。我的最终目标是为我可能想跨不同页面使用的模板的键盘快捷键设置一个 "listener"。在 "enter" 它应该处理输入，但它没有。单击按钮效果很好。

我的身材看起来很轻松：

<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 包含在 body 上的所有页面上是有意义的。任何帮助将不胜感激。提前致谢！

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-路由器和指令的范围问题

Scope issue with ui-router and directives

javascript

angularjs

angularjs-directive

angular-ui-router