AngularJS指令模板不渲染

我有一個簡單的指令，只顯示有一段文字：AngularJS指令模板不渲染

app.directive("exampleText", function() { 
    return { 
     restrict: "E", 
     template: '<div>hello!</div>' 
    } 

});

在我的index.html我有這樣的：

<div class="container" ng-app="customerPortalApp"> 
    <div ui-view></div> 
    <exampleText></exampleText> 
</div>

exampleText是我ui-view作爲外多數民衆贊成在做我的路線和正常工作。但它對我的理解指令模板應該按原樣呈現。我錯過了什麼嗎？

來源

2013-11-23 Prometheus

隨着一個名爲指令：

app.directive("exampleText", ...

HTML應該是：

<example-text></example-text>

從documentation：

角正常化元素的標籤和屬性的名稱確定哪些元素匹配哪些指令。我們通常參考指令，以其區分大小寫的camelCase規範化名稱（例如 ngModel）。但是，由於HTML不區分大小寫，因此我們通過小寫形式在DOM中引用指令，通常使用有關DOM元素（例如，ng-模型）的破折號分隔的屬性。

來源

2013-11-23 19:01:38 tasseKATT

我的人生浪費了兩個小時，非常感謝！這是問題。 – Prometheus

只是一個注意事項。示例文本失敗，但exampletext工作。它也不喜歡 - 這是正常的嗎？ – Prometheus

您是否將指令名稱作爲「exampleText」？然後「example-text」應該在你的html中工作。 – tasseKATT

由於tasseKATT指出該指令的名稱應保持爲「exampleText」和html元素應該是<example-text>

我想到了一個演示可以幫助 demo

模板：

<div ng-app="myApp"> 
    <sample-text></sample-text> 
</div>

該指令：

var app = angular.module('myApp', []); 
app.directive('sampleText', function() { 
    return { 
     restrict: "E", 
     template: '<div>Some sample text here.</div>' 
    }; 
});

來源

2013-11-23 21:11:52 klode

AngularJS指令模板不渲染

回答

相關問題