ユーザーがng-clickでクリックした後に関数を呼び出すにはどうすればよいですか？

Question

私は、このページにoptimizelyテストを実行している： https://www.thelotter.com/pt/bilhetes-loteria/africa-sul-powerball/?player=0

これはテストのために、現在のjavascriptです：

/* Don't touch this code */ 
 
function waitForDelayedContent(selector, experiment, timeout, keepAlive) { 
 
    var intervalTime = 50; 
 
    var timeout = timeout || 3000; 
 
    var keepAlive = keepAlive || false; 
 
    var maxAttempts = timeout/intervalTime; 
 
    var attempts = 0; 
 
    var elementsCount = 0; 
 
    var interval = setInterval(function() { 
 
     if ($(selector).length > elementsCount) { 
 
      if (!keepAlive) { 
 
       clearInterval(interval); 
 
      } 
 
      experiment(); 
 
      elementsCount = $(selector).length; 
 
     } else if (attempts > maxAttempts) { 
 
      clearInterval(interval); 
 
     } 
 
     attempts ++; 
 
    }, intervalTime); 
 
} 
 
/* --------------------------------------------- */ 
 

 
waitForDelayedContent(".jackpot", function(){ 
 

 
$("#ctl00_tdMainRightSite").css({"display":"none", "visibility":""}); 
 
$("#divMainLeftSite").addClass("Clean_content_left_wide"); 
 
$("#tdMainLeftSite").addClass("Clean_TdMainLeftSite"); 
 
    
 
$(".play-request-options").css({"display":"none", "visibility":""}); 
 
    $(".play-request-options").attr("style", "display: none !important;"); 
 
$(".play-request-summary").addClass("Clean_play-request-summary"); 
 
$(".btn-lucky-numbers").css({"display":"none", "visibility":""}); 
 
$(".bonus-box").addClass("Clean_bonus-box"); 
 
$(".ticket-line-holder").attr("style", "width: 153px !important;"); 
 
$(".cell-value").attr("style", "height: 20px !important; width:22px !important; font-size:14px; padding-top: 3px; margin-right:1px;"); 
 

 
$(".SkipThisFixedPosition").css({"display":"none", "visibility":""}); 
 
$(".nav-tabs-simple").css({"display":"none", "visibility":""}); 
 
$(".wrapper").addClass("Clean_ticket-lines-container"); 
 
$(".long_regular_separator").addClass("Clean_long_regular_separator"); 
 
$(".nav-tab > .syndication").css({"display":"none", "visibility":""}); 
 
$(".nav-tab > .bundle").css({"display":"none", "visibility":""}); 
 
$(".nav-tab > .personal").css({"display":"none", "visibility":""}); 
 
$(".play-view-regular").addClass("Clean_play-view-regular"); 
 
$(".ticket-line-content").addClass("Clean_ticket-line-content"); 
 

 

 
$(".watermark").addClass("Clean_watermark"); 
 
$(".lottery-card").addClass("Clean_lottery-card"); 
 
$(".jackpot").addClass("Clean_jackpot"); 
 
$(".btn-size-large").addClass("Clean_btn-size-large"); 
 

 

 
$(".btn-size-large > .btn-content > .btn-text").addClass("Clean_btn-text"); 
 

 
$(".nav-buttons-group > .btn-color-blue").addClass("Clean_btn-color-blue"); 
 
$(".nav-buttons-group > .btn-color-blue > .btn-content").addClass("Clean_btn-color-blue_content"); 
 
$(".play-type-selection-wrapper").addClass("Clean_play-type-selection-wrapper"); 
 
    
 
});

しかし、その代わりにwaitForDelayedContent機能の、私が必要ユーザーが下記のliタグ（HTMLの一部）をクリックした後でテストを実行する関数を使って実行するテスト：

ユーザーがNGクリックのいずれかにクリックした後、私は関数を呼び出すにはどうすればよい

<div id="App-PlayRequest" data-ng-controller="PlayRequest.PlayRequestController" class="ng-scope"> 
 
<ul class="play-type-containers"> 
 
<li class="play-type-container" ng-click="setGameType(0)">...</li> 
 
<li class="play-type-container" ng-click="setGameType(3)">...</li> 
 
<li class="play-type-container" ng-click="setGameType(4)">...</li> 
 
</ul> 
 
</div>

？

私はそれが単純なコードかもしれないと思いますが、私は開発者ではなく、答えのコードを作ることができませんでした。

ありがとうございました！

Answer 1

次のコードを試してください。スニペット：角度jで作業したい場合は、ITが機能します。

angular.module('app',[]) 
 
.controller('TodoListController', function ($scope) { 
 
$scope.setGameType = setGameType; 
 
function setGameType(index) { 
 
    console.log(index); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <div ng-app='app'> 
 
    <div ng-controller="TodoListController as todoList"> 
 
    <ul class="play-type-containers"> 
 
      <li class="play-type-container" ng-click="setGameType(0);">a...</li> 
 
      <li class="play-type-container" ng-click="setGameType(3);">b...</li> 
 
      <li class="play-type-container" ng-click="setGameType(4);">c...</li> 
 
      </ul> 
 
    </div> 
 
    </div>

更新 また、あなただけのjavscriptを使用する場合： これらを試してみてください -

function setGameType(index) { 
 
    console.log(index); 
 
}

<ul class="play-type-containers"> 
 
      <li class="play-type-container" onclick="setGameType(0);">a...</li> 
 
      <li class="play-type-container" onclick="setGameType(3);">b...</li> 
 
      <li class="play-type-container" onclick="setGameType(4);">c...</li> 
 
      </ul>

Answer 2

これを試してみてください。

<!DOCTYPE html> 
<html> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script> 
<body ng-app="myApp"> 

<div ng-controller="myCtrl"> 

<button ng-click="setGameType(1)">OK</button> 
<ul class="play-type-containers"> 
<li class="play-type-container" ng-click="setGameType(0)">One</li> 
<li class="play-type-container" ng-click="setGameType(1)">Two</li> 
<li class="play-type-container" ng-click="setGameType(2)">Three</li> 
</ul> 

</div> 

<script> 
angular.module('myApp', []) 
.controller('myCtrl', ['$scope', function($scope) { 
$scope.count = 0; 

$scope.setGameType = function(val) { 
    alert("Do something here with id "+val); 
}; 
}]); 
</script> 
</body> 
</html> 

Answer 3

<!DOCTYPE html> 
<html> 
<script 
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script> 
<body ng-app="myApp"> 

<div ng-controller="myCtrl"> 

<button ng-click="setGameType(1)">OK</button> 
<ul class="play-type-containers"> 
<li class="play-type-container" ng-click="setGameType(0)">One</li> 
<li class="play-type-container" ng-click="setGameType(1)">Two</li> 
<li class="play-type-container" ng-click="setGameType(2)">Three</li> 
</ul> 

</div> 

//This script code according to john pappa's guideline. 
<script> 
(function() { 
    angular.module('myApp') 
    .controller('myCtrl', myCtrl); 

    function myCtrl(
    $scope 
    ) { 
    $scope.setGameType = setGameType; 
    function setGameType(val){ 
      console.log('Selected game type value',val); 
      //do stuff which you want when user click. 
    } 
})(); 

</script> 
</body> 
</html>