是否可以在不使用包含的情况下干燥响应角度模板的一部分？

Question

我有一个小角度应用程序，具有移动和桌面视图。客户希望控制每个视图的位置不同，我可以通过巧妙地使用HTML来实现，如下所示：

正常：

移动：

除了位置之外，控件完全相同，因此重复代码感觉就像浪费一样。我打算将它们放在一个单独的模板中，但首先我想看看我是否错过了一些我可以用来更容易实现的聪明指令。

Answer 1

我可能会使用灵活的盒子模型（display: flex）。你可以在CSS Tricks找到一个很好的概述。请特别注意order属性以重新排列项目。

如果您正在寻找一种特定于Angular的方法，如果您将每个控件都设置为指令，则可以将它们包装在父指令中，该指令将在加载时编译模板。

.directive('myTemplate', ['$compile', function($compile) {
    return {
        link: function(scope, element, attributes) {
            var directiveOne = angular.element('<div/>')
                    .attr('directiveOneName', '')
                    .attr('otherAttribute', attributeValue),
                directiveTwo = angular.element('<div/>')
                    .attr('directiveTwoName', '');

            $compile(directiveOne)(scope);
            $compile(directiveTwo)(scope);

            if (/* check window width here */) {
                element.append(directiveTwo);
                element.append(directiveOne);
            } else {
                element.append(directiveOne);
                element.append(directiveTwo);
            }
        },
        restrict: 'AE'
    };
}]);

但这种方法的表现可能不太好。