将模板从 ngRoute 注入指令 AngularJS

Question

是否可以将来自 ngRoute 的模板注入（或者也许 merge 会更好）指令中的模板？

我们举例说明：

有一个带有 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>'
    });
}]);

我不知道我们需要一个控制器来做某事吗？

还有指令：

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);
        }
    };
}]);

这是指令中我要粘贴模板的行：

"<span class=\"navbar-brand\" > INSERT TEMPLATE HERE (for. ex. <p>Product Return Page</p>) </span>"

在 HTML 中

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

有可能吗？

或者也许 - 如何在没有 ng-view 的情况下将 Controller 中的值传递到指令中？

angular.module('dynamic-menu').controller('ProductReturnController', ['$scope', function ($scope) {
    $scope.header = "PROOODDUUUCCCTTT REEETUUURRRNNN TTTITTTTLEEEEE";
}]);

更新：

我有几页。前任。在page1 我会用我的<menu-template template-name="main"></menu-template>

和page2 page3 page4 - 在这些页面中，我将使用我的<menu-template template-name="searcher"></menu-template>

Answer 1

如果你的路由只包含 menuTemplate 指令（看起来是这样），那么只需在模板中包含该指令：

template: '<menu-template template-name="search">SOME TEMPLATE FOR SEARCH</menu-template>'

然后使指令嵌入其内容。而且，不需要手动$compile（虽然你可以）——你可以在指令模板中定义它：

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 than the template) you might need here
  }
}