我正在尝试在下面的庄园中创建自定义指令:
我的主要 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>标签可见。我在 Google Chrome 中没有收到控制台错误。
您可能可以从我的主 html 文件中看到我尝试使用 ng-include="'data-table.html'" 添加到 data-table.html 文件中。属性(显然在 ajs-directive.js 文件中创建了一个 Controller )。当我这样做时，效果很好。
只是想知道为什么当我使用该指令时它不起作用 - 已经用谷歌搜索和调整了几天，但无法弄清楚。
最佳答案
Angular 文档 https://docs.angularjs.org/guide/directive
其中我们可以读到:
Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g.
ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g.ng-model).The normalization process is as follows:
- Strip x- and data- from the front of the element/attributes.
- Convert the :, -, or _-delimited name to camelCase.
这似乎是指令名称问题。
注意:不要使用data-作为指令名称或在您的情况下(我不确定)所有名为 <table> 的元素将应用dataTable指示。你可以检查一下我是否错了:P
关于javascript - angularJs 自定义指令未加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31563017/