Question

我知道jquery存在相同问题的答案，但我想用angularJs来做。我想使用angularJs触发单击一次双击。是否有可能在angularJs。我找不到那样的东西。我刚刚找到了如何处理双击，但我想触发双击单击。 I m using bootstrap tabs they are not activating on single click(Picture)。我也尝试过更改类onlick。

HTML code：

<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);
}]);

Answer 1

以下是Angular JS中如何处理双击的小型演示。现在按照这个例子，如果我想点击/触发双击事件。我只是调用相对处理程序$scope.performDblClick。我希望它能解决你的问题。

＆＃13;

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');};
});

＆＃13;

.container-fluid { margin-top: 3% !important; }

＆＃13;

<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>

＆＃13;

如何使用angularJs触发单击一次双击

1 个答案: