Question

我正在尝试在下面的庄园中创建一个自定义指令：

我的主要html文件：

<body ng-app="boom">

<!--<section ng-include="'data-table.html'"></section>-->
<data-table></data-table>
</body>

我的app.js文件：

(function () {
     var app = angular.module('boom', ['ajs-directives']);
})();

我的ajs-directive.js文件：

(function () {

var app = angular.module('ajs-directives', []);

app.directive('dataTable', function () {
    return {
        restrict: 'E',
        templateUrl: 'data-table.html',
        controller: function () {
            this.dataSet = dataSet;
        },
        controllerAs: 'tableData'
    };
});

var dataSet = [
    {
        prop1: 'one',
        prop2: 'two',
        prop3: 'three'
    },
    {
        prop1: 'four',
        prop2: 'five',
        prop3: 'six'
    }
];
})();

我的data-table.html文件：

<div class="table-wrapper">

<table class="table table-fixed">
    <thead class="header">
        <tr>
            <th>Entity</th>
        </tr>
    </thead>
</table>

<div id="media_table_height" class="table-content scroll-outer">
    <div class="scroll-inner">
        <table class="table-fixed">
            <tbody ng-repeat="data in tableData.dataSet">
                <tr class="data-row">
                    <td>{{data.prop1}}</td>
                </tr>
                <tr class="data-row">
                    <td>{{data.prop2}}</td>
                </tr>
                <tr class="data-row">
                    <td>{{data.prop3}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

</div>

我遇到的问题是我的主html文件中没有任何内容呈现。只有<data-table></data-table>标签可见。我在谷歌浏览器中没有出现控制台错误。

您可以从我的主html文件中看到我尝试使用ng-include="'data-table.html'"属性添加data-table.html文件（显然在ajs-directive.js文件中创建了一个控制器）。当我这样做的时候它工作得很好。

只是想知道为什么当我使用该指令时它不起作用 - 已经谷歌搜索和调整了几天但是无法弄明白。

Answer 1

Angular docs https://docs.angularjs.org/guide/directive

在其中我们可以阅读：

Angular 规范化元素的标记和属性名称以确定   哪些元素匹配哪些指令。我们通常会提到   它们区分大小写的camelCase 规范化名称的指令（例如   ngModel）。但是，由于HTML不区分大小写，我们参考   DOM中的指令通过小写形式，通常使用   DOM元素上的破折号分隔属性（例如ng-model）。

规范化过程如下：


从元素 / attributes。
的正面剥离x-和数据
将：， - 或_分隔的名称转换为camelCase。

这似乎是指令名称问题。

注意：请勿使用data-作为指令名称，或者在您的情况下（我不确定）所有名为<table>的元素都将应用{{1}指令。你可以查看它是否我错了：P

Answer 2

出于某种原因（尚未弄清楚） - 角度无法识别元素的名称......

快速解决方案 - 只需在指令E.G。

中更改元素的名称和绑定

查看：

<datatable></datatable>

指令：

app.directive('datatable', function () {...

anglularJs自定义指令未加载

2 个答案: