如何使用angularjs指令创建可重用的组件?

时间:2015-10-06 08:10:36

标签: javascript html angularjs

我想用html创建一个可重复使用的angulajrs组件,所以我可能不得不去directives。我创建了一个简单的,但不起作用:

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

结果:我没有看到任何内容,并且控制台中没有错误。

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

1 个答案:

答案 0 :(得分: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.