it-roy-ru.com

Uncaught ReferenceError: angular не определен - AngularJS не работает

Я пытаюсь выучить угловой и борюсь с простым нажатием кнопки.
Я последовал примеру, код которого идентичен приведенному ниже.

В результате я ищу нажатия кнопки, чтобы вызвать предупреждение. Тем не менее, нет ответа на нажатие кнопки. У кого-нибудь есть идеи? 

<html lang="en" ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
    <div >
        <button my-directive>Click Me!</button>
    </div>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

    <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>
44
Calgar99

Вам нужно переместить код вашего углового приложения ниже включения угловых библиотек. На момент запуска вашего углового кода angular еще не существует. Это ошибка (см. Вашу консоль разработчика).

В этой строке:

var app = angular.module(`

вы пытаетесь получить доступ к переменной с именем angular. Подумайте, что вызывает эту переменную. Это можно найти в скрипте angular.js, который должен быть включен первым.

  <h1>{{2+3}}</h1>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

      <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>

Для полноты, это правда, что ваша директива похожа на уже существующую директиву ng-click, но я считаю, что цель этого упражнения - просто попрактиковаться в написании простых директив, так что это имеет смысл.

71
m59

Используйте директиву ng-click:

<button my-directive ng-click="alertFn()">Click Me!</button>

// In <script>:
app.directive('myDirective' function() {
  return function(scope, element, attrs) {
    scope.alertFn = function() { alert('click'); };
  };
};

Обратите внимание, что вам не нужен my-directive в этом примере, вам просто нужно что-то связать alertFn с текущей областью действия.

Обновление : Вы также хотите, чтобы угловые библиотеки загружались перед вашим блоком <script>.

5
jkinkead

Просто для дополнения правильный ответ m59 , вот рабочий jsfiddle :

<body ng-app='myApp'>
    <div>
        <button my-directive>Click Me!</button>
    </div>
     <h1>{{2+3}}</h1>

</body>
3
zszep

я забыл добавить строку ниже в мой HTML-код после того, как я добавил, что проблема решена.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
0
saigopi

Как вы знаете, angular.module (объявлен в файле angular.js. Перед тем как получить доступ к angular.module, вы должны сделать его доступным с помощью <script src="lib/angular/angular.js"></script> (в вашем случае), после чего вы можете вызвать angular.module. Это будет работать.

лайк

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
<!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>

    <script>
        var app = angular.module('myApp',[]);

        app.directive('myDirective',function(){

            return function(scope, element,attrs) {
                element.bind('click',function() {alert('click')});
            };

        });
    </script>
</head>
<body ng-app="myApp">
    <div >
        <button my-directive>Click Me!</button>
    </div>
    <h1>{{2+3}}</h1>

</body>
</html>
0
Brajesh