AngularJs custom directive not getting invoked

Question

I am new to AngularJs. I am trying to invoke custom directive but it is not getting invoked.

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="customDirective.js"></script>
</head>
<body>
    <div ng-app="app">
        <div ng-controller="MyController as ctrl">
            <testingDirective></testingDirective>
            {{ctrl.test}}
        </div>

    </div>

</body>

My javascript file looks like:

var app=angular.module('app',[]);
app.controller('MyController',[function(){
    var self=this;
    self.test='no';
    
    }]);
app.directive('testingDirective',function(){
    return{
            
            restrict:'AE',
            replace:true,
            template:'<h1>Hello World Test</h1>'
        };
    });

Sean Walsh · Accepted Answer · 2015-08-30 05:34:27Z

5

Camel cased directive names have to be called using a hyphen. For example, if you have a directive named myDirective, you would use it in the markup as <my-directive></my-directive>.

answered Aug 30, 2015 at 5:34

Sean Walsh

8,3643 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shreyas · Accepted Answer · 2015-08-30 05:33:46Z

5

Directive:

app.directive('testingDirective',function(){});

HTML Usage:

<testing-directive></testing-directive>

answered Aug 30, 2015 at 5:33

Shreyas

1,93518 silver badges34 bronze badges

Collectives™ on Stack Overflow

AngularJs custom directive not getting invoked

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related