AngularJS custom directive isn't working

Question

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?

isherwood · Accepted Answer · 2016-02-03 17:51:01Z

3

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

You should use directive as element if using restrict: 'E' and should have custom attribute "info" as below
When you are using replace:true in directive then the template should have single root element. More information

edited Feb 3, 2016 at 17:51

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Oct 12, 2015 at 15:48

Manoj Shevate

7424 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2015-10-12 15:41:13Z

2

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>

answered Oct 12, 2015 at 15:41

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

ladanta Over a year ago

So you use camel case to name a directive, then it gets converted to a hyphenated format? Changing it seemed to do something anyways, the directive is still not showing up, but the console is now showing the following error: i.imgur.com/h4ZH05a.png

Collectives™ on Stack Overflow

AngularJS custom directive isn't working

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related