如何使用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', ...) 

每駱駝被分成連字符，這就是爲什麼該指令沒有工作。 您沒有看到錯誤，因爲它不過是一個沒有語義含義的元素，但在語法上是正確的。