Question

我有一些我接手的代码。它看起来像这样：

<div id="init"
     data-admin-template
     ng-show="ss.display.init"
     data-template-url="init.html">
</div>

有一个指令adminTemplate：

app.directive('adminTemplate', ['stateService', function (stateService) {
    return {
        restrict: 'A',
        templateUrl: function (elem, attrs) {
            return "/Content/app/admin/templates/" + attrs.templateUrl;
        },
        link: function (scope, element, attrs) {
            scope.stateService = stateService;
        }
    };
}]);

我对模板不是很熟悉，而且这个指令看起来并没有那么多。有没有办法可以在没有指令的情况下做到这一点？

Answer 1

正如@Oli在评论中所说，ng-include绝对是一种解决方案。还有其他人 - 有角度的人喜欢为你提供足够的选择让你自己怀疑 - 但我想知道你通过改变它实际获得了什么。

使用ng-include你需要为你的html添加一个控制器，以提供stateService（如果你不在这里，你必须将它添加到每个不同的管理员模板）。所以你最终得到：

<div id="init"
     ng-include="/Content/app/admin/templates/init.html"
     ng-show="ss.display.init"
     ng-controller="AdminController">
</div>

所以你最终得到相同数量的属性，你需要整个模板路径，它变得不那么可读。看看你现在拥有的东西，很清楚看到意图。

您还可以更进一步，并赋予其作为元素或属性的灵活性

<admin-template
    id="init"
    ng-show="ss.display.init"
    data-template-url="init.html">
</admin-template>


app.directive('adminTemplate', ['stateService', function (stateService) {
    return {
        restrict: 'EA',
        templateUrl: function (elem, attrs) {
            return "/Content/app/admin/templates/" + attrs.templateUrl;
        },
        link: function (scope, element, attrs) {
            scope.stateService = stateService;
        }
    };
}]);

它似乎做得很少，但我的感觉是，之前的开发人员已经重构了重复，以达到这个小指令。我认为，因为它会移除锅炉板，允许轻松重复使用并在标记中很好地传达意图。

如何将HTML包含在HTML文件中的AngularJS页面中？

1 个答案: