ladanta
ladanta

Reputation: 469

AngularJS custom directive isn't working

Tried a few different solutions, not sure where exactly I'm going wrong. I know the directive is linked properly, and have tried template instead of templateURL to test if it would work that way, but nothing.

Directive:

app.directive('printTasks', function() {
return {
    restrict: 'E',
    replace: 'true',
    scope: {
        info: '='
    },
    templateUrl: '../printTasks.html'
};
});
console.log('printTasks is linked');

Calling in HTML:

            <section ng-controller="MainController">
                <header>This Week
                    <a href="">
                        <i class="fa fa-2x fa-stack-2x fa-plus"></i>
                    </a>
                </header>
                <printTasks/>
            </section>

I've also tried and that hasn't worked either. Anyone have any ideas?

Upvotes: 1

Views: 269

Answers (2)

Manoj Shevate
Manoj Shevate

Reputation: 742

couple of points to be considered in above case of writing derictive -

  1. You should use directive as element if using restrict: 'E' and should have custom attribute "info" as below

  2. When you are using replace:true in directive then the template should have single root element. More information

Upvotes: 3

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

It should be use camel case while using on html, also directive element shouldn't be self closing like <printTasks/>, as you have defined you own custom element.

<print-tasks></print-tasks>

Upvotes: 2

Related Questions