使用angularjs的键盘事件来增强用户体验

绑定键盘事件（尤其注意：不能用a标签，不然会失效）

推荐button

• 方法一：ng内置指令

  <code class="bash"><button ng-click=<span class="hljs-string" style="color: rgb(0, 136, 0);">"login()"</span> ng-keypress=<span class="hljs-string" style="color: rgb(0, 136, 0);">"todoSomething(<span class="hljs-variable" style="color: rgb(102, 0, 102);">$event</span>)"</span> class=<span class="hljs-string" style="color: rgb(0, 136, 0);">"btn btn-success btn-lg"</span> ng-disabled=<span class="hljs-string" style="color: rgb(0, 136, 0);">"loginForm.<span class="hljs-variable" style="color: rgb(102, 0, 102);">$invalid</span>"</span>>
    登录
  </button></code>

  说明：在对应的控制器中的$scope上绑定一个todoSomething方法

  <code class="php">  <span class="hljs-variable" style="color: rgb(102, 0, 102);">$scope</span>.todoSomething=<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span><span class="hljs-params" style="color: rgb(102, 0, 102);">(<span class="hljs-variable">$event</span>)</span></span>{
        <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span>(<span class="hljs-variable" style="color: rgb(102, 0, 102);">$event</span>.keyCode==<span class="hljs-number" style="color: rgb(0, 102, 102);">13</span>){<span class="hljs-comment" style="color: rgb(136, 0, 0);">//回车</span>
            login();
        }
    }</code>

• 方法二：自定义指令
  html

  <code class="scala"><button ng-click=<span class="hljs-string" style="color: rgb(0, 136, 0);">"login()"</span> ng-enter=<span class="hljs-string" style="color: rgb(0, 136, 0);">"login()"</span> <span class="hljs-class"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">class</span>=</span><span class="hljs-string" style="color: rgb(0, 136, 0);">"btn btn-success btn-lg"</span> ng-disabled=<span class="hljs-string" style="color: rgb(0, 136, 0);">"loginForm.$invalid"</span>>
    登录
  </button></code>

  指令

  <code class="php">myApp.directive(<span class="hljs-string" style="color: rgb(0, 136, 0);">'ngEnter'</span>, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
        <span class="hljs-keyword" style="color: rgb(0, 0, 136);">return</span> <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">(scope, element, attrs)</span> </span>{
            element.bind(<span class="hljs-string" style="color: rgb(0, 136, 0);">"keydown keypress"</span>, <span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">(event)</span> </span>{
                <span class="hljs-keyword" style="color: rgb(0, 0, 136);">if</span> (event.which === <span class="hljs-number" style="color: rgb(0, 102, 102);">13</span>) {
                    scope.<span class="hljs-variable" style="color: rgb(102, 0, 102);">$apply</span>(<span class="hljs-function"><span class="hljs-keyword" style="color: rgb(0, 0, 136);">function</span> <span class="hljs-params" style="color: rgb(102, 0, 102);">()</span> </span>{
                        scope.<span class="hljs-variable" style="color: rgb(102, 0, 102);">$eval</span>(attrs.ngEnter);
                    });
                    event.preventDefault();
                }
            });
        };
    });</code>

  总结：两种方法都能实现敲回车登录的功能，不过推荐指令的方式，对$scope的污染比较低

•