H. Baldassin H. Baldassin - 4 months ago 10
AngularJS Question

AngularJS custom directive don't generate the code

I'm new to AngularJS and, seeing all my html code becoming more massive and dirty, I wanted to do directives to organize it. So, I started by a little directive that you can see here:

app.module('MyDirectiveModule', [ ])

.directive('TestDirective', function () {
return {
restrict: 'E',
templateUrl: 'test-index.html'
};
});


for this little piece of code:

<div class="text-center">
<h1>Coding with AngularJs</h1><br><br>
</div>


so the final result is (the html directive file is test-index.html):

<body ng-app="testsApp">

<test-index></test-index>


I include all the scripts and I have checked all the paths, I still don't understand why it still doesn't work..

Answer

You have this:

<body ng-app="testsApp">

which means you should have a testsApp module. If you do, it should depend on MyDirectiveModule, which your directive is in.

angular.module('testsApp', ['MyDirectiveModule']);

If you don't have a testsApp module, then replace your ng-app value to the directive module:

<body ng-app="MyDirectiveModule">

And as @Baruch mentions, your directive's element should be changed to this:

<test-directive></test-directive>
Comments