CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangular-directive
Abhay Pore
Abhay Pore

Reputation: 75

AngularJs custom directive not getting invoked

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

Upvotes: 1

Views: 182

Answers (2)

Sean Walsh
Sean Walsh

Reputation: 8344

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

Upvotes: 5

Shreyas
Shreyas

Reputation: 1937

Directive:

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

HTML Usage:

<testing-directive></testing-directive>

Upvotes: 5

Related Questions