angularjs - Material Design Lite and ng-include -
i starting app , adding navigation provided getmdl website (header , drawer) works fine if in index.html file when try ng-include, when testing hamburger not showing hence drawer , when resize screen vanishes totally.
for think of mdl classes not working when used tru ng include, why?
<div ng-include="'tmpl/navigation.html'"></div> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class="mdl-layout__header"> <div class="mdl-layout__header-row"> <!-- title --> <span class="mdl-layout-title">title</span> <!-- add spacer, align navigation right --> <div class="mdl-layout-spacer"></div> <!-- navigation. hide in small screens. --> <nav class="mdl-navigation mdl-layout--large-screen-only"> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> </nav> </div> </header> <div class="mdl-layout__drawer"> <span class="mdl-layout-title">title</span> <nav class="mdl-navigation"> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> <a class="mdl-navigation__link" href="">link</a> </nav> </div> </div>
if problem ng-include, can use includereplace directive, swap div ng-include html in file.
.directive('includereplace', function () { return { require: 'nginclude', restrict: 'a', /* optional */ link: function (scope, el, attrs) { el.replacewith(el.children()); } }; })
and use this:
<div include-replace ng-include="'tmpl/navigation.html'"></div>
Comments
Post a Comment