2

我正在尝试使用热键来更改 AngularJS 中的选项卡。我是 AngularJS 的新手，但我确信它应该像下面的代码一样简单。因此，当按下热键时，无法更改选项卡的活动性。它现在基本上什么都不做，但是当按下“t”时，它应该显示 tab2 内容。

我创建了一个键绑定指令，它调用一个函数并使用 Mousetrap 来使用键盘快捷键。因此，当按下热键“t”时，我可以调用该函数并将活动选项卡更改为 true，但我无法显示更改在视图中。

这是我的 html 文件

 <div ng-controller="TabsDemoCtrl">

 <keybinding on="t" invoke="hotkey()"></keybinding>
 <tabset>
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active">
   {{tab.content}}
  </tab>
 </tabset>
</div>

这是 app.js 文件

  var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
  app.controller('TabsDemoCtrl', function ($scope, $window) {
  $scope.tabs = [
   { title:'Dynamic Title 1', content:'Dynamic content 1' },
   { title:'Dynamic Title 2', content:'Dynamic content 2'}
    ];

  $scope.hotkey = function(){
   $scope.tabs[1].active=true;
        }
  });

   app.directive('keybinding', function () {
    return {
      restrict: 'E',
     scope: {
         invoke: '&'
     },
    link: function (scope, el, attr) {
        Mousetrap.bind(attr.on, scope.invoke);
    }
 };
 });

这是一个 Plunker。

4

0 回答 0