CODEWITHSUNDEEP
angularjsangularjs-directive
AnonDCX
AnonDCX

Reputation: 2597

Angular custom directive not being called

I am new to angular and am currently converting my conventional html/javascript website into an Angular application.

I am stuck on a custom directive where the problem is that it is not rendering in the view.

From reading the angular docs, I understand the camel-casing convention and that if you don't have the 'restrict' property set, Angular will automatically assume that its an attribute so I know that there are no issues there.

Here is how I have structured my directive:

var directives = angular.module('app.directives', []);
directives.directive("dataPercent", [function() {
    return {
        restrict: 'E',
        template: '<a href="http://google.com">Click me to go to Google </a> '

    }
}]);

How it is in the DOM:

<data-percentage></data-percentage>

And the reference to the directive in the header of index.html

<script src="assets/directives/dataPercentDirective.js"></script>

Also just in case this is how I init my controllers, directives and services in app.js:

angular.module('app', ['app.controllers', 'app.directives', 'app.services']);

The strange part is that there are no errors displayed in dev tools

Upvotes: 0

Views: 332

Answers (1)

murli2308
murli2308

Reputation: 3002

Use datPercent as data is reserved keyword

data is reserved keyword.

jsbin http://jsbin.com/yexonayoho/edit?html,js,output

Upvotes: 1

Related Questions