Question

AngularJS全新，所以我们将非常感谢任何帮助。

我有一个模式可以提供有关公司的一些信息。

此处链接：http://104.236.181.252:49156/#portfolio

正如您所看到的，我可以使用上一个和下一个按钮在公司之间移动，但我希望用户能够使用左右键盘键。我在div中使用了ng-keydown指令，但没有运气。这是我改变页面的模态代码：

                <div class="modal-footer" ng-controller="portfolio">
                    <nav>
                        <ul class="pager">
                            <li class="previous"><a href="" ng-click="prevPage(co)"><span aria-hidden="true">&larr;</span> Previous</a></li>
                            <li class="next"><a href="" ng-click="nextPage(co)">Next<span aria-hidden="true">&rarr;</span></a></li>
                        </ul>
                    </nav>
                </div>

当我按左或右键盘键时，我希望能够分别在prevPage(co)和nextPage(co)之间循环。

修改

这是我的模态代码：

<script type="text/ng-template" id="myModalContent.html" ng-keydown="">

                <div class="modal-header">
                    <img class="displayed lightbox" src="{{co.logo}}" tabindex="1">
                    <button type="button" class="close" data-dismiss="modal" ng-click="cancel()">
                        <span aria-hidden="true">&times;</span><span class="sr-only">
                        </span>
                    </button>

                </div>

                <div class="modal-body" id="currentModal">
                    <div class="social_links">
                        <a class="social_icon" href="{{co.url}}">
                            <img src="img/web.png">
                        </a>
                        <a class="social_icon" href="{{co.crunchbase_url}}">
                            <img src="img/crunchbase-2.png">
                        </a>
                        <a class="social_icon" href="{{co.angellist_url}}">
                            <img src="img/angellist.ico">
                        </a>
                        <a class="social_icon" href="{{co.twitter_url}}">
                            <img src="img/icon-twitter.png">
                        </a>
                    </div>
                    <div class="row companyd">
                        {{ co.investor_description }}
                        <div class="line-separator" ng-if="co.founders"></div>
                        <h5 ng-if="co.founders">Founders</h5>
                            <div ng-repeat="founder in co.founders" >
                                <div class="span-4 founderimg" ng-if="co.founders.length == 3">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                                <div class="span-6 founderimg" ng-if="co.founders.length == 2">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                                <div class="span-12 founderimg" ng-if="co.founders.length == 1">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                                <div class="span-3 founderimg" ng-if="co.founders.length == 4">
                                    <img src="{{founder.founder_pic}}" style="height:100px" class="founders" ng-if="founder.founder_pic != null">
                                    <img src="http://korea.fas.harvard.edu/sites/korea.fas.harvard.edu/files/imagecache/profile_page/imagefield_default_images/default_profile_icon_0.png" style="width:100px" class="founders" ng-if="founder.founder_pic == null"><br><a href="{{founder.linkedin_url}}">{{founder.founder_name}}</a>
                                </div>
                            </div>
                    </div>
                </div>

                <div class="modal-footer" ng-controller="portfolio">
                    <div ng-keypress="myFunct($event)">
                    <nav>
                        <ul class="pager">
                            <li class="previous"><a href="" ng-click="prevPage(co)"><span aria-hidden="true">&larr;</span> Previous</a></li>
                            <li class="next"><a href="" ng-click="nextPage(co)">Next<span aria-hidden="true">&rarr;</span></a></li>
                        </ul>
                    </nav>
                    </div>
                </div>
            </script>

Answer 1

您需要使用ng-keydown而不是ng-keypress。此外，它需要放在身体上，而不是div，因为如果在div上它不会发射。

<body ng-view="" ng-keydown="myFunct($event)">

  $scope.previous = function () {
    console.debug('Previous');
  };

  $scope.next = function () {
    console.debug('Next');
  };

  $scope.myFunct = function(keyEvent) {
    if (keyEvent.which === 37) {
        $scope.previous();
    }
    else if (keyEvent.which === 39) {
        $scope.next();
    }
  };

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

Answer 2

我知道你可以在按任意键时使用ng-keypress执行代码。使用此信息，我们可以了解以下内容。

ng-keypress="myFunct($event)"

然后在控制器内。

$scope.myFunct = function(keyEvent) {
    if (keyEvent.which === 13) {
        alert('Enter Pressed!');
    }
}

显然，您可以将密钥编号编辑为您想要的任何密钥。然后在那里调用prevPage（）或nextPage（）。

有一个类似的问题here。我转发了那里的信息。

使用键盘箭头键在angularjs中循环浏览不同的模态

2 个答案: