2015-05-27 102 views
0

我已經嘗試了一個基本的angularjs應用程序。我的控制器工作正常,但指令中的模板似乎不起作用,請提出解決方案。爲什麼Angularjs指令模板不能渲染?

下面是我的代碼

的index.html

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DataApp1"> 
    <head> 

     <script src="Scripts/angular.min.js"></script> 
    </head> 
    <body> 

     <div data-ng-controller="DataController1">  
      <data-directive> </data-directive> 
     </div> 

     <script src="Scripts/App.js"></script> 
    </body> 
    </html> 

app.js

/// <reference path="angular.js" /> 

var myapp = angular.module("DataApp1", []); 

myapp.controller("DataController1", function ($scope) { 

}); 

myapp.directive("dataDirective", function() { 
    return { 
     restrict: 'E', 
     template: '<h2>Hi</h2>' 
    }; 
}); 

回答

2

的問題是你的命名約定, 伴有data-任何文本被認爲沒有它in anglejs,

例如:data-ng-model, data-ng-bind

名稱您的指令,這樣directive和使用或不使用data-稱呼它,都是相同的

然後它的作品!

Working Plunker with your code

見文檔

Directive Docs

+0

好,我知道它但錯誤:)感謝您的答案:) – NewDirection

0

我會避免使用數據 - 在你的角度指令。這真的不需要。

此外,我會把ng-app指令放在你的body標籤上,它會增加你的頁面加載速度。即使只有一點點,當你進入企業級應用程序開發時,每一點點都很重要。

+0

數據是可選的,但它是否真的加快我的網頁加載,如果我把ng-app指令放到我的身體標記中?快多少?你能舉例證明嗎? – NewDirection

+1

它稍微快一些,因爲它不需要包含中的元素,從而縮小了範圍的大小。 爲什麼你想要在html文檔中聲明ng-app的唯一原因是如果你想用它來操作標題,但是你可以使用$ window來做同樣的事情。 –