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

Question

我想创建一个angulajrs可重复使用的html组件，所以我可能不得不去directives。我创建了一个简单的，它不工作：

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

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

我-fn.html：

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

结果：我没有看到任何东西，并且在控制台中没有错误。

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

Answer 1

你的声明是错误的，应该是不带连字符：

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

每骆驼被分成连字符，这就是为什么该指令没有工作。 您没有看到错误，因为它不过是一个没有语义含义的元素，但在语法上是正确的。