2015-05-27 67 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来做同样的事情。 –