javascript - Inject template from ngRoute into Directive AngularJS -


is possible inject (or maybe merge better word) a template ngroute template in directive?

let's explain in example:

there config ngroute

angular.module('dynamic-menu').config(['$routeprovider', function ($routeprovider) {     $routeprovider.when('#', {         controller: 'maincontroller',         template: '<p>main page</p>'     });     $routeprovider.when('#/productreturn/', {         controller: 'productreturncontroller',         template: '<p>product return page</p>'     });     $routeprovider.when('#/demand/', {         controller: 'demandcontroller',         template: '<p>demand page</p>'     }); }]); 

i don't know need controller sth?

and directive:

angular.module('dynamic-menu').directive('menutemplate', ['$compile', function ($compile) {     return {         restrict: 'e',         link: function (scope, element, attrs) {             var template = {                 'searcher': "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\">"                           + "<div class=\"container-fluid\">"                               + "<div class=\"navbar-header\">"                                   + "<span class=\"navbar-brand\" > insert template here </span>"                               + "</div>"                           + "</div> <!-- /.container-fluid -->"                        + "</nav>",                 'main' : (...) <- not important             }; //var template end              var templateobj;             if (attrs.templatename) {                 templateobj = $compile(template[attrs.templatename])(scope);             }             else {                 templateobj = $compile(template['main'])(scope);             }             element.append(templateobj);         }     }; }]); 

here line in directive want paste template:

"<span class=\"navbar-brand\" > insert template here (for. ex. <p>product return page</p>) </span>" 

and in html

<menu-template template-name="searcher"></menu-template> 

is possible?

or maybe - how pass value in controller directive without ng-view?

angular.module('dynamic-menu').controller('productreturncontroller', ['$scope', function ($scope) {     $scope.header = "prooodduuucccttt reeetuuurrrnnn tttittttleeeee"; }]); 

update:

i have few pages, for. ex. in page1 use <menu-template template-name="main"></menu-template>

and page2 page3 page4 - inside these pages, use <menu-template template-name="searcher"></menu-template>

if route consist of menutemplate directive (as seems be), include directive in template:

template: '<menu-template template-name="search">some template search</menu-template>' 

then make directive transclude contents. and, there no need manually $compile (although can) - can define in directive template:

var template = {   search: "<nav class='navbar'>\              etc...\              <div ng-transclude></div>\            </nav>",    main: "..." };  return {   template: function(element, attrs){     return template[attrs.templatename];    },   transclude: true,   link: function(scope, element){     // whatever else (other template) might need here   } } 

Comments