将模板从ngRoute注入到AngularJS指令中

Inject template from ngRoute into Directive AngularJS

本文关键字：AngularJS 指令 注入 ngRoute      更新时间：2023-09-26

是否可以注入(或者合并将是更好的词)一个模板从ngRoute到模板中的指令?

让我们用例子来解释:

有一个配置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的指令中?

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>

如果你的路由只包含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
  }
}
相关文章：