javascript - anglularJs custom directive not loading -
i trying create custom directive in below manor:
my main html file:
<body ng-app="boom"> <!--<section ng-include="'data-table.html'"></section>--> <data-table></data-table> </body>
my app.js file:
(function () { var app = angular.module('boom', ['ajs-directives']); })();
my ajs-directive.js file:
(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' } ]; })();
and data-table.html file:
<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>
the issue have nothing renders in main html file. <data-table></data-table>
tags visible. no console errors in google chrome.
you might able see main html file have tried adding in data-table.html file using ng-include="'data-table.html'"
attribute (and creating controller in ajs-directive.js file). when did way worked fine.
just wondering why won't work when using directive - have been googling , tweaking few days can't figure out.
angular docs https://docs.angularjs.org/guide/directive
in can read:
angular normalizes element's tag , attribute name determine elements match directives. typically refer directives case-sensitive camelcase normalized name (e.g.
ngmodel
). however, since html case-insensitive, refer directives in dom lower-case forms, typically using dash-delimited attributes on dom elements (e.g.ng-model
).the normalization process follows:
- strip x- , data- front of element/attributes.
- convert :, -, or _-delimited name camelcase.
it seems directive name problem.
note: dont use data-
directive name or in case (i'm not sure) elements called <table>
apply datatable
directive. can check see if i'm wrong :p
Comments
Post a Comment