Question

我环顾四周，找不到适合我的答案。我有一个组件，用John Papa的风格指南构建，向用户显示上传的照片。

我想实现一些视图，类似于Windows，MacOS允许您在详细视图，缩略图视图之间切换的视图。

由于视图如此不同并且为了使代码保持可维护状态，我希望将这些模板保存在单独的文件中。

那我该怎么做呢？

不同的方法是：

.directive('myDirective', function () {
    return {
        templateUrl: function (tElement, tAttrs) {
            if (tAttrs.type) {
                if (tAttrs.type === 'thumb') {
                    return 'thumbnail.html';
                }
                if (tAttrs.type === 'list') {
                    return 'list.html';
                }
                if (tAttrs.type === 'detail') {
                    return 'detail.html';
                }
            }
        }
    }
});

这里的问题是模板很早就被确定了，并且在刷新之前无法更改。

 <ng-switch on="post.viewMode">
    <ng-switch when="thumbnail" ng-include="'./thumbnail.html'">
    <ng-switch when="list" ng-include="'/list.html'">
    <ng-switch when="detail" ng-include="'/detail.html'">
</ng-switch>

这似乎是最好的，但ng-include创建了一个新的范围，它抛弃了我的组件结构，所有东西都必须通过范围访问。$ parent.variable

最后一个选项是将所有三个视图放入相同的html模板文件中，并使用ng-if来使用正确的视图。

Answer 1

是的，template / templateUrl函数是错误的方式，没有范围或插值属性，这些属性通常被视为控制指令行为的方式。

正如其他一些内置指令一样，ng-include是一种快速解决方法（他们称之为“声明式编程”），但由于上面提到的原因，它也是自以为是的PITA - 它强制继承范围甚至如果你不想要它。

.directive('myDirective', function ($templateRequest, $compile) {
    return {
        link: function (scope, element, attrs) {
            var prevTplName;
            var templates = {
                thumb: 'thumbnail.html',
                // ...
            }

            attrs.$observe('type', setTemplate);

            function setTemplate(tplName) {
                if (!templates.hasOwnProperty(tplName) || prevTplName === tplName)
                    return;

                $templateRequest(templates[tplName]).then(function (response) {
                    var contents = $compile(response)(scope);
                    element.empty().append(contents);
                });
            }
        }
    };
});

AngularJS组件模板切换

1 个答案: