angularjs custom directive not working

Question

I added my custom attribute to my application like this

'use strict';

myApp.directive('orientable', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attrs, controller) {
      element.bind("load", function (e) {
        console.log('test');
        /* my code is here*/

      });

    }
  }
});

Add using this in my view like this

<div class="xyz" orientable></div>

but it is not calling link function, what I am doing wrong.

Answer 1

Your fiddle doesn't work.

Don't know what you are trying to do, but this one works.

Just do what you want on link function.

Answer 2

as lante said, your fiddle is broken. It isn't loading angular or its dependecies (cookies and animation). On another note, there is no load for a div. Just move your log out of the element.bind...

var myApp = angular.module('myApp', []);

myApp.controller('myctrl', ['$scope','$rootScope',function($scope,$rootScope)
{
    //controller logic
}]);

myApp.directive('orientable',function () {       
    return {
        restrict:'A',
        link: function(scope, element, attrs, controller) {   
            console.log('yahan');               
            element.addClass("vertical");             
        }
    }
});

You also had restrict: 'E' which is element name as in <orientable></orientable>

You have it as an attribute so you need to change the restrict to A

You can do restrict: 'EA' and have the ability to use either method (attribute or element name).

Answer 3

I have faced same problem. Finally I got to know that we need to load "orientable" as DI module for ng-app. We need to add this "orientable".