Question

是否有可能将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的情况下将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
  }
}

将ngRoute中的模板注入Directive AngularJS

1 个答案: