Question

我有一种情况，我需要在第一次和第二次点击div时执行不同的事件。在第一次单击时，div将被展开，在第二次单击时，它将被重定向到它的详细信息页面。 Div包含帖子的详细信息。

  <div ng-click="select(comment._id);"
     ng-dblclick="changeurl(user.username,data.type,comment._id)"
       enter ng-repeat="user in data.user">

直到现在我在第一次点击时扩展div，然后在双击时我将其重定向到它的详细页面。

最好的方法是什么。

现在我的想法是在ng-click上制作一个计数器然后执行事件。我们可以在DOM End上执行它吗？

 <div ng-click="counter = counter + 1"  ng-repeat="user in data.user" ng-init="counter = 0" >

是否还有其他指令我可以有条件地执行选择（comment._id） changeurl（user.username，data.type，comment._id）或者怎么能我有条件地称这些功能？

更新：关于戴安娜建议这里更新状态：

这里我没有来自ng-repeat的div，这里我有两种类型的布局，根据数据显示。

  <div ng-repeat="data in comments">
    <div ng-if="data.type=story">
     <div ng-click="clickEvent($index,comment._id, user.username,data.type);" enter ng-repeat="user in data.user">
  //displaying data here
    </div>
      </div> 
      <div ng-if="data.type=news">
       <div ng-click="clickEvent($index,comment._id, user.username,data.type);" enter ng-repeat="user in data.user"> 
       //displaying data here
       </div>
      </div>
   </div> 



$scope.secondClick = [];
//scope data  
myservice.data().then(function(response){
    $scope.comments = response.data; 
    for (i=0; i< $scope.comments.length;i++){
     $scope.secondClick[i] = false; 
     }
   });



$scope.clickEvent = function(index,id, userName, type){

if(!$scope.secondClick[index]){

    // Execute first-click logic (call select function with the id).
    $scope.secondClick[index] = true;
}
else{

    // Execute second-click logic (call changeurl function with the id, userName, and type).

 }

}

我尝试为功能提供索引并操纵它们。由于嵌套的ng-repeat，我得到索引'0'。

Answer 1

<强> UPDATE2：

我尝试从问题中了解您的设置，并相应地提出了完整工作演示。我希望这适合你的情况！

http://plnkr.co/edit/ARsDpRH7orzZQLU1pin1

请让我知道这是怎么回事。

/////////////////////////////////////

你可以有一些最初设置为false的布尔变量，比如说$scope.secondClick - 当你第一次点击按钮设置为true时。当下次变量为true时单击它，以便执行“第二次单击”逻辑。

类似的东西：

<div ng-click="clickEvent(comment._id, user.username,data.type);" enter ng-repeat="user in data.user">

在您的控制器中，定义：

$scope.secondClick = false;

$scope.clickEvent = function(id, userName, type){

    if(!$scope.secondClick){

        // Execute first-click logic (call select function with the id).
        $scope.secondClick = true;
    }
    else{

        // Execute second-click logic (call changeurl function with the id, userName, and type).

    }

}

<强>更新

假设你有多个div，我们可以通过在作用域中包含一个布尔值数组并传递索引来知道哪个是哪个来调整解决方案：

<div ng-click="clickEvent($index, comment._id, user.username,data.type);" enter ng-repeat="user in data.user">

在控制器中：

$scope.secondClicks = [];

//Initialize all values to false, based on the number of divs.
for(var i = 0; i<NoOfDivs; i++){
  $scope.secondClicks[i] = false;
}

$scope.clickEvent = function(index, id, userName, type){

    if(!$scope.secondClicks[index]){

        // Execute first-click logic (call select function with the id).
        $scope.secondClicks[index] = true;
    }
    else{

        // Execute second-click logic (call changeurl function with the id, userName, and type).

    }

}

请告诉我们是否有效。如果有人有一个更整洁的解决方案，我也想查看它：）

Answer 2

我认为这可能是一种告诉JavaScript根据点击次数执行不同操作的简单方法。此示例显示了两个不同事件的交换。基本上，我只是将计数从0限制为1并使序列循环。 Ofc，你可以做的不仅仅是两个。我认为这是循环的，所以用户可以自由导航（首先他扩展一些东西，而不是缩回它，而不是再扩展它等等）。也许按照这个原则，你将解决你的代码。

<!DOCTYPE html>
<head>
<style>
#division {background-color: red;color: white;width: 10%;height: 20%;position: fixed;top: 10%;left: 10%;-webkit-transition: 1s;-moz-transition: 1s;-ms-transition: 1s;-o-transition: 1s;transition: 1s;}
#division:hover {background-color: blue;cursor: pointer;}
</style>
</head>

<body>
<script type="text/javascript">           
    var clicks = 0;	
      function onClick() {
          clicks += 1;
          if (clicks != 1) { 
          clicks = 0;
          };
          if (clicks == 1) {
              document.getElementById("division").style.left = 30+'%';
          }else {
              document.getElementById("division").style.left = '10%';
          };	
      };	        	
</script>  	
<div onClick="onClick()"><a id="division">Click me Twice!</a></div>
</body>
</html>

Answer 3

试试这个：

在html div中：

ng-init="count=0" 

ng-click="select(count)(count=count+1);"

在JS中：

$scope.select = function(count) {

    if(count%2 == 0 ) {

        here write your SECOND click functionality.

    } else {

        here write your FIRST click functionality.

    }

}

Answer 4

我是通过将post id放入cookie中来实现的。首次点击该帖子的ID存储在cookie中，如果用户再次点击，则会在cookie存储中创建第二次点击操作。因此，我们会对第一次和第二次点击采取行动。

$scope.clickEvent = function(id,name,type){   

var favoriteCookie = $cookieStore.get('divonclick');      
$cookieStore.put('divonclick',id);
if(favoriteCookie == id){

   //second click action
  }else{
    //first click action
}

}

在第一次和第二次单击角度js上执行不同的事件

4 个答案: