javascript - 如何使用 angularjs 指令创建可重用组件？

Question

我想使用 angulajrs 创建一个可重用的 html 组件，因此我可能必须使用指令。我创建了一个简单的，但不起作用:

<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>

结果:我没有看到任何内容，控制台中也没有错误。

如何确保指令加载并找到模板？

Answer 1

你的声明是错误的，应该没有连字符:

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

每个驼峰式大小写都被分成连字符，这就是该指令不起作用的原因。 您没有看到错误，因为它只是一个没有语义意义的元素，但在语法上是正确的。