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

Question

我知道以前曾提出过类似的问题，并且已经解决了很多问题，但是作为初学者，我仍然无法使我的代码正常工作。 我这里有一个小矮人。 我的最终目标是为我可能要在不同页面上使用的模板的键盘快捷方式设置一个“侦听器”。 在“输入”时，它应该处理输入，但不会。 单击按钮可以正常工作。

我的身体看起来很轻松：

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-03-10 23:19:56

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-03-10 23:19:56

解决方案1
0 已采纳 2015-03-10 23:19:56