用户点击ng-click后如何调用函数?

时间:2017-05-10 09:12:18

标签: javascript angularjs 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的一部分)之后运行测试:



<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>
&#13;
&#13;
&#13;

用户点击任何ng-click后如何调用函数?

我认为它可能是一个简单的代码,但我不是开发人员,也无法使答案中的代码生效。

非常感谢你!

3 个答案:

答案 0 :(得分:0)

尝试下面的代码片段:如果你想使用角度js,IT将会工作。

&#13;
&#13;
angular.module('app',[])
.controller('TodoListController', function ($scope) {
$scope.setGameType = setGameType;
 function setGameType(index) {
    console.log(index);
  }
});
&#13;
 <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>
&#13;
&#13;
&#13;

<强>更新 另外如果你只想使用javscript: 试试这些: -

&#13;
&#13;
function setGameType(index) {
  console.log(index);
}
&#13;
    <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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

请试一试。

isValidPassword

答案 2 :(得分:0)

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