0

div の 1 回目と 2 回目のクリックで異なるイベントを実行する必要がある状況があります。最初のクリックで div が展開され、2 回目のクリックで詳細ページにリダイレクトされます。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" >

select(comment._id) changeurl(user.username,data.type,comment._id) を条件付きで実行できる他のディレクティブはありますか、またはこれらの関数を条件付きで呼び出すにはどうすればよいですか?

更新: ここでのダイアナのアドバイスは、更新されたステータスです:

ここでは、ng-repeat からの div はありません。ここでは、データに従って表示される 2 種類のレイアウトがあります。

  <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' を取得しています。.

4

4 に答える 4

2

更新 2:

私は質問からあなたの設定を理解しようとし、それに応じて完全に機能するデモを思いつきました. これがあなたのケースでうまくいくことを願っています！

http://plnkr.co/edit/ARsDpRH7orzZQLU1pin1

これがどうなるか教えてください。

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

たとえば、最初に false に設定されているブール変数をいくつか持つことができます。たとえば$scope.secondClick、最初にボタンをクリックしたときに true に設定します。次に変数をクリックすると、変数が true になるため、「2 回目のクリック」ロジックが実行されます。

何かのようなもの：

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

    }

}

これが機能するかどうかお知らせください。誰かがよりきちんとした解決策を持っている場合は、私もそれをチェックしたいと思います:)

于 2014-05-19T12:07:20.207 に答える
1

これは、クリック数に応じて異なることを行うように JavaScript に指示する簡単な方法かもしれないと思います。この例は、2 つの異なるイベントの交換を示しています。基本的に、カウントを 0 から 1 に制限し、シーケンスを循環させました。もちろん、2 つ以上作成することもできます。これの利点は円形であるため、ユーザーは自由にナビゲートできると思います（最初に何かを拡大するよりも、縮小するよりも、再度拡大するよりも...）。おそらく、この原則に従うことで、コードを解決できます。

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

于 2014-10-19T13:56:43.713 に答える
0

これを試して：

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.

    }

}
于 2014-06-18T08:21:29.317 に答える
0

投稿IDをCookieに入れることでこれを行いました。最初のクリックで投稿の ID が Cookie に保存され、ユーザーがもう一度クリックすると Cookie ストアに作成され、2 回目のクリック アクションがトリガーされます。したがって、最初と 2 番目のクリックでアクションを実行します。

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

}

于 2014-06-18T08:30:09.567 に答える