如何通过 templateUrl AngularJS 合并几个部分

Question

我在想有没有办法通过 templateUrl 在 AngularJS 中的 directive 中合并部分视图？

假设我有指令：

.directive('mergeThisStupidPartials', function () {
    var mainpartial = "mainpartial.html",
    var template2 = "partial2.html",
    var template3 = "partial3.html"

    return {
        restrict: "E",
        templateUrl: mainpartial,

        //merge mainpartial with template2 and template3 
        //link function need?
    };
});

我会有更多的部分，它们会在某些情况下重新出现（例如：

带有 mainpartial 和 partial2、partial4、partial6 的一个视图

将 mainpartial 与 partial1 和 partial5 合并的另一个视图)

我想知道这样，因为我的部分代码有很多 HTML 代码，我可以将它们放入 template 而不是 templateUrl 但是那样会有一个巨大的块的代码。我想避免这种情况。

AngularJS可以吗？

Answer 1

只是 ng-include mainpartial.html 中的所有部分：

<div ng-include="template1"></div>
<div ng-include="template2"></div>
<div ng-include="template3"></div>
<!-- etc -->

确保将部分网址分配给 $scope 个变量：

.directive('mergeThisStupidPartials', function () {
    var mainpartial = "mainpartial.html";

    return {
        restrict: "E",
        templateUrl: mainpartial,
        controller: ['$scope', function ($scope) {
            $scope.template1 = "partial1.html";
            $scope.template2 = "partial2.html";
            $scope.template3 = "partial3.html";
            // Etc
        }]
    };
}]);

也可以直接使用mainpartial.html中的路径：

<div ng-include="'partial1.html'"></div>
<div ng-include="'partial2.html'"></div>
<div ng-include="'partial3.html'"></div>

请注意，我包含了额外的引号，因此 angular 将属性解释为字符串。

如何通过 templateUrl AngularJS 合并几个部分

How to merge few partials via templateUrl AngularJS

javascript

merge

templates

directive

angularjs