angularjs - Nested directive inside template is placed at the top -
i'm having issues angularjs directive i'm attempting make.
the main directive called tableu, has tableu-heading , tableu-body, both of inside table so:
<table> <tableu-heading headings='data.format'> </tableu-heading> <tableu-body data='data'> </tableu-body> </table>
the issue is, in chrome , firefox, (but not in ie8 reason) resulting code inserted when envoke directive formatted strangly. end with;
<tableu> <tableu-heading> </tableu-heading> <tableu-body> <tableu-body> <table> </table> </tableu>
so nested directives placed inline table. i've tried few permutations transclude thinking might problem can't seem resolve issue.
my directive code thus:
angular.module('air.directives.tableu',[]) .directive('tableu', function () { return { restrict:'ea', scope: { data: '=', }, templateurl: 'template/tableu/tableu.html' }; }) .directive('tableuheading',function() { return { restrict:'ea', replace: false, scope: { headings: '=' }, templateurl: 'template/tableu/tableu-heading.html', compile: function compile(telement, tattrs, transclude) { return function link(scope, ielement, iattrs) { } } }; }) .directive('tableubody',function() { return { restrict:'ea', transclude: true, replace: false, templateurl: 'template/tableu/tableu-body.html', compile: function compile(telement, tattrs, transclude) { return function link(scope, ielement, iattrs) { } } }; })
any can give appreciated - can't think solution obvious.
mark rajcok seems correct. solution me invoke directives class or attribute instead of element - avoids particular problem.
Comments
Post a Comment