How to create reusable components with angularjs directives?

Question

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?

Omri Aharon · Accepted Answer · 2015-10-06 08:15:38Z

1

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.

answered Oct 6, 2015 at 8:15

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

How to create reusable components with angularjs directives?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related