-1

我知道 jquery 存在相同问题的答案，但我想使用 angularJs 来解决。我想使用angularJs触发双击。有没有可能在angularJs中。我找不到类似的东西。我刚刚找到了如何处理双击，但我想在单击时触发双击。 我正在使用引导选项卡，它们不会在单击（图片）时激活。我还尝试过更改课程 onlick。

HTML 代码：

<ul class="nav nav-tabs">
  <li class="active" id="menu01" name="item" ng-class="{active : activeMenu === menuItems[0]}" ng-click="setActive(menuItems[0])"><a data-toggle="tab" href="#home">{{menuItems[0]}}</a></li>
  <li id="menu02" ng-class="{active : activeMenu === menuItems[1]}" name="item" ng-click="setActive(menuItems[1])"><a data-toggle="tab" href="#menu1">{{menuItems[1]}}</a></li>
  <li id="menu03" ng-class="{active : activeMenu === menuItems[2]}" name="item" ng-click="setActive(menuItems[2])"><a data-toggle="tab" href="#menu2">{{menuItems[2]}}</a></li>
  <li id="menu04" ng-class="{active : activeMenu === menuItems[3]}" name="item" ng-click="setActive(menuItems[3])"><a data-toggle="tab" href="#menu3">{{menuItems[3]}}</a></li>
  <li id="menu05" ng-class="{active : activeMenu === menuItems[4]}" name="item" ng-click="setActive(menuItems[4])"><a data-toggle="tab" href="#menu4">{{menuItems[4]}}</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
      {{templates[0].url}}
      <!-- <span ng-include="templates[0].url"></span> -->
    </div>
  <div id="menu1" class="tab-pane fade">
    </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
  </div>
  <div id="menu3" class="tab-pane fade">
    <h3>Menu 3</h3>
    <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
  </div>
</div>
<!--End of card-->

控制器：

$scope.menuItems = ['Course Goals','Curriculum', 'Course Landing Page', 'Automatic Messages', 'Course Settings'];
$scope.setActive = function(menuItem) {
   $scope.activeMenu = menuItem;
   console.log($scope.activeMenu);
}
$scope.templates =
   [{ name: 'template1.html', url: 'courseTemplates/courseTemp1.html'},
    { name: 'template2.html', url: 'courseTemplates/courseTemp2.html'}];
console.log($scope.templates);
}]);
4

1 回答 1

0

下面是如何处理双击的小演示Angular JS。现在按照这个例子，如果我想点击/触发双击事件。我只是打电话给相对的 handler $scope.performDblClick。我希望它对您的问题有所帮助。

var app = angular.module('demo', []);
app.controller('homeController', function($scope){
  $scope.outputMessage = 'Hi! Welcome to Angular JS Demo App.';
  $scope.performDblClick = function(){ alert('Item double clicked');};
});
.container-fluid { margin-top: 3% !important; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container-fluid" ng-app="demo">
  <div class="row" ng-controller="homeController">
    <div class="col-lg-3 pull-left">
      <button class="btn btn-primary btn-xs" ng-dblclick="performDblClick($event)">Click Me!</button>
    </div>
    <div class="col-lg-9 pull-right">{{ outputMessage }}</div>
  </div>
</div>

于 2018-05-02T06:06:58.340 回答