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

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -