leqo leqo - 4 months ago 39
AngularJS Question

AngularJS ng-click does not work

Here's my code (i already added angular):

<body ng-app="clickExample" ng-controller="ExampleController" ng-init="choice = 1">
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$http', '$scope', function ($http, $scope) {
$scope.apiCall = function () {
alert('ciao');
};
}]);
</script>
<div>
<button ng-click="apiCall()">Ciao</button>
</div>
</body>


EDIT: here's the entire html (i also have a style-sheet and other JS libraries but i don't think they're relevant).

<html>

<head>
<title>Network | Social Network</title>
<style>
body {
font: 10pt arial;
}

#mynetwork {
width: 600px;
height: 600px;
border: 1px solid lightgray;
background: #F3F3F3;
}
</style>
<script type="text/javascript" src="vis.js"></script>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="apiLogic.js"></script>
<script type="text/javascript" src="myModule.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<link href="vis.css" rel="stylesheet" type="text/css">
<link href="stileTabs.css" rel="stylesheet" type="text/css"> </head>

<body ng-app="clickExample" ng-controller="ExampleController" ng-init="choice = 1">
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$http', '$scope', function ($http, $scope) {
$scope.showAlert = function () {
alert("This is an example of ng-click");
};
$scope.apiCall = function () {
alert('ciao');
};
}]);
</script>
<div ng-class="{selected: choice == 1, unselected: choice != 1}">
<button class="tab" type="button" ng-click="choice=1">Cerca per nome</button>
</div>
<div ng-class="{selected: choice == 2, unselected: choice != 2}">
<button class="tab" type="button" ng-click="choice=2">Cerca per ID</button>
</div>
<div ng-class="{selected: choice == 3, unselected: choice != 3}">
<button class="tab" type="button" ng-click="choice=3">Rankings</button>
</div>
<div id="info" ng-show="choice==1"> Nome:
<input type="text" id="nodeNameTxt">
<br/> Data:
<input type="text" id="dateTxt">
<br/>
<button type="button" onclick="gnbn()">Cerca nodo</button>
<br/> </div>
<div ng-show="choice==2"> Id:
<input type="text" id="nodeIdTxt">
<br/> Data:
<input type="text" id="dateIdTxt">
<br/>
<button type="button" onclick="gnbid()">Cerca nodo</button>
<br/> </div>
<div ng-show="choice==3"> Limite:
<input type="text" id="rankLimitTxt">
<br/> Data:
<input type="text" id="rankDateTxt">
<br/>
<button type="button" onclick="grank()">Ottieni classifica</button>
<br/>
<button ng-click="ExampleController.apiCall()">Ciao</button>
</div>
<div id="mynetwork" ng-hide="choice==3">
<div class="vis network-frame" style="position: relative;
overflow: hidden;
-webkit-user-select: none;
touch-action: pan-y;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;">
<canvas width="1000" height="600" style="position: relative;
-webkit-user-select: none;
touch-action: pan-y;
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%;
height: 100%;"> </canvas>
</div>
</div>
</body>

</html>


When i click on the button nothing happens, what i'm doing wrong?

Answer

its working , From your ng-click ,Remove ExampleController

correct : <button ng-click="apiCall()">Ciao</button>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="clickExample" ng-controller="ExampleController" ng-init="choice = 1">
    <script>
    var app = angular.module("clickExample", []);
    app.controller('ExampleController', ['$http', '$scope', function ($http, $scope) {
        $scope.apiCall = function () {
            alert('ciao');
        };
    }]);
    </script>
    <div>
        <button ng-click="apiCall()">Ciao</button>
    </div>
</body>

Comments