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

Question

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

假设我有指令:

.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 的一个 View ，带有partial2、partial4、partial6

将 mainpartial 与partial1 和partial5 组合在一起的另一个 View )

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

在 AngularJS 中可以吗？

Answer 1

只需 ng-include mainpartial.html 中的所有部分:

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

确保将部分 URL 分配给 $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 将属性解释为字符串。