AngularJS NG-點擊不起作用

這裏是我的代碼（我已添加角）：AngularJS NG-點擊不起作用

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

編輯：這裏是整個HTML（我也有一個樣式表和其他JS庫，但我不認爲他們是相關的）。

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

當我點擊按鈕什麼都沒有發生，我做錯了什麼？

來源

2016-07-27 leqo

角版本使用 –

具有負載agular.js在你的頁面？ –

'app.controller（'ExampleController'，['$ http'，'$ scope'，function（$ http，$ scope）{'控制器中參數的順序 - 您首先注入'$ http'服務，然後注入'$範圍' –

-1

其工作，從您的NG-點擊，刪除ExampleController

正確：<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>

來源

2016-07-27 11:30:59

我添加了整個代碼 – leqo

這不起作用 – leqo

。刪除示例控制器從ng點擊 –

您應該添加$ HTTP在app.controller

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

來源

2016-07-27 11:28:41

爲什麼這是被投票？ –

我發現了錯誤。

把角色腳本導入後腳本...因爲你在導入角色之前試圖使用角度。

例如：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script> 
var app = angular.module('clickExample', []); 
app.controller('ExampleController', ['$http', '$scope', function ($http,$scope) { 
    $scope.apiCall = function() { 
     alert('ciao'); 
    }; 
}]); 
</script>

它會使你的代碼工作。

來源

2016-07-27 11:28:56

他已經指定他添加了角 –

現在我 –

AngularJS NG-點擊不起作用

回答

相關問題