Question

这是我的代码（我已添加角度）：

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

当我点击按钮时没有任何反应，我做错了什么？

Answer 1

您应该在app.controller

中添加 $ http

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

Answer 2

我发现了错误。

在导入角度脚本之后插入脚本...因为您在导入之前尝试使用angular。

例如：

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

它将使您的代码正常工作。

Answer 3

正常工作，点击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>

AngularJS ng-click不起作用

3 个答案: