CODEWITHSUNDEEP
javascripthtmlangularjs
membersound
membersound

Reputation: 86687

How to create reusable components with angularjs directives?

I want to create a reusable html component with angulajrs, so I'd probably have to go for directives. I created a simple one, which does not work:

<my-fn info="test"></my-fn>

app.directive('my-fn', function() {
    return {
        restrict: 'E',
        templateUrl: 'templates/my-fn.html',
        scope: {
            info: "=info"
        }
    };
});

my-fn.html:

<p>the value is: {{info}}</p>

Result: I don't see anything, and there is no error in the console.

How can I ensure that the directive loads, and that the template is found?

Upvotes: 0

Views: 191

Answers (1)

Omri Aharon
Omri Aharon

Reputation: 17064

Your declaration is wrong, it should be without the hyphen:

app.directive('myFn', ...)

Every camel case is split into hyphens, this is why the directive didn't work. You didn't see an error because it is otherwise just an element without semantic meaning, but is syntactically correct.

Upvotes: 1

Related Questions