AngularJS клик не работает

0

Здесь мой код (я уже добавил угловой):

<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: здесь весь 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>

Когда я нажимаю кнопку, ничего не происходит, что я делаю неправильно?

  • 0
    угловая версия используется
  • 0
    Вы загружаете agular.js на своей странице?
Показать ещё 4 комментария
Теги:
controller
angularjs-ng-click

3 ответа

-1
Лучший ответ

его работа, С вашего 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>
Поделиться
  • 0
    Я добавил весь код.
  • 0
    Это не работает
Показать ещё 6 комментариев
0

Вы должны добавить $ 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>
Поделиться
  • 0
    Почему за это проголосовали?
0

Я нашел ошибку.

поместите скрипт... после импорта углового скрипта, потому что вы пытаетесь использовать угловые перед импортом.

Например:

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

Это заставит ваш код работать.

Поделиться
  • 0
    Он уже уточнил, что добавил угловой
  • 0
    На данный момент я написал, никто не дал этот ответ.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню