CODEWITHSUNDEEP
javascriptangularjstypescriptionic-framework
acloD128
acloD128

Reputation: 103

Directive not shown in angular

I have the following directive in a typescript file:

ProjectDirectivs.ts 

/// <reference path="../module.ts"/>

module BalancingApp.App.Directives {
    angular.module('balancingApp')
    .directive('wbProject', function() {
        return {
            template: "<p>Projectdetails</p>"
        };
    })
    ;
}

When I call it inside of a template for a project detail page

ProjectDetailPage.html

<ion-view view-title="Projekt Details">
    <ion-content class="padding">
        <h1>Projekt Details</h1>
        <div wbProject>

        </div>
    </ion-content>
</ion-view>

it has no effects, there seems just to be empty space below the heading.

Do I do something wrong? How can I test if the wbProject directive actually is used?

If I edit the typescript file and insert errors, the whole page keeps in loading stage, so it seems that the file gets actually used and is not ignored.

Upvotes: 0

Views: 39

Answers (2)

MarkoCen
MarkoCen

Reputation: 2324

Angular converts the directive name into camel-case in template, so you should use wb-project instead of wbProject in template

Upvotes: 2

Wasiq Muhammad
Wasiq Muhammad

Reputation: 3118

Try this

 angular.module('balancingApp')
    .directive('wbProject', function() {
        return {
            restrict: 'AE',
            template: "<p>Projectdetails</p>"
        };
    });

Upvotes: 0

Related Questions