CODEWITHSUNDEEP
angularjsangularjs-directive
Peter Boomsma
Peter Boomsma

Reputation: 9844

Angular directive for simple animation

I have a template, inside that template is div with the class big-box and it's inside a div container called .movie-container.

Template,

.movie-container
  .big-box

I want to animate the .big-box element to a height of 300px (from 0px) when a user clicks on the .movie-container.

I've tried to setup a directive with a click function but it's not working. When I click on the .big-box div it doesn't show the click in the console log.

app.directive('big-box', [function() {
  return {
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        console.log ('click')
      });
    }
  }
}]);

So I could use some tips.

Upvotes: 0

Views: 282

Answers (1)

Midhun Darvin
Midhun Darvin

Reputation: 1255

The naming convention used for the directive is not correct. You have to use camel case while defining your custom directives. 

app.directive('bigBox', [function() {   // Use camel case 
  return {
    link: function(scope, elem, attrs) {
      elem.bind('click', function() {
        console.log ('click')
      });
    }
  }
}]);

and in your html you need to use it like this :

<div class="movie-container">
    <div big-box>  <!-- using the directive -->
       click here
    </div>
 </div>

The name must be written using dashes and each dash represents a capital letter from the directive definition. It is a angularjs convention.

Here is a working fiddle.

Upvotes: 1

Related Questions