Question

我尝试了一个基本的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>'
    };
});

Answer 1

问题在于您的命名约定，任何带有data-的文本都会在angularjs中被认为没有它，

示例：data-ng-model, data-ng-bind

将此指令命名为此directive并使用或不使用data-来调用它们，两者都相同

然后它有效！

Working Plunker with your code

参见文档

Directive Docs

Answer 2

我不会在你的角度指令上使用数据。它真的不需要。

另外，我会将ng-app指令放在你的body标签上，它会提高你的页面加载速度。即使只是轻微的，当您进入企业级应用程序开发时，每一点都很重要。

为什么Angularjs指令模板不呈现？

2 个答案: