current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 31 down vote favorite
6

I'm attempting to learn angular and I am struggling with a simple button click. I followed an example which has identical code as below. The result I am looking for is for the button click to cause an alert. However there is no response to the button click. Does anybody have any ideas? 

<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>
share|improve this question
6  
Could it be caused by angular being loaded after your custom script? – jfelsinger Jan 29 '14 at 19:08
    
If you are getting the error given in the title then there would not even be a button to click. – Mawg Oct 23 at 11:05
up vote 57 down vote accepted

You need to move your angular app code below the inclusion of the angular libraries. At the time your angular code runs, angular does not exist yet. This is an error (see your dev tools console).

In this line:

var app = angular.module(`

you are attempting to access a variable called angular. Consider what causes that variable to exist. That is found in the angular.js script which must then be included first.

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

For completeness, it is true that your directive is similar to the already existing directive ng-click, but I believe the point of this exercise is just to practice writing simple directives, so that makes sense.

share|improve this answer
    
@m59. Besides what you stay, he still has to add the ng-app directive to initialize angularjs. See my js-fiddle code below – zszep Jan 29 '14 at 19:46
1  
@ŽeljkoSzep huh? He has the ng-app directive already. It's in the first line of his code. – m59 Jan 29 '14 at 19:53
    
@m59. What a blunder. I copied only the body part from his code into js-fiddle as it already includes the html tag, so I missed the line with the ng-app directive. Sorry. I deleted my answer. – zszep Jan 29 '14 at 19:57
    
That worked, thanks. – vantesllar Sep 2 '15 at 10:25
up vote 5 down vote

Use the ng-click directive:

<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'); };
  };
};

Note that you don't need my-directive in this example, you just need something to bind alertFn on the current scope.

Update: You also want the angular libraries loaded before your <script> block.

share|improve this answer
    
And what @m59 said - you need the angular libraries first. :) – jkinkead Jan 29 '14 at 19:12
up vote 3 down vote

Just to complement m59's correct answer, here is a working jsfiddle:

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

</body>
share|improve this answer
1  
Your demo link is not working anymore – Vajk Hermecz Jun 29 '15 at 17:09
    
Seems the guys from jsfiddle deleted my code snippet, – zszep Jun 29 '15 at 18:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.