使用不同模板的 AngularJS 指令

Question

这可能会有点复杂，所以我会尽量保持简单。 我有一个指令：

.directive('configuratorRows', function () {
    return {
        restrict: 'A',
        scope: {
            garments: '=configuratorRows',
            templateUrl: '&',
            colours: '='
        },
        templateUrl: 'assets/tpl/directives/configuratorRows.tpl.html',
        controller: 'ConfiguratorRowsDirectiveController',
        link: function (scope, element, attrs, controller) {

            // Assign our garments to our controller
            controller.garments = scope.garments;
            scope.rows = controller.rows;

            // Invoke our calculation function
            controller.buildRows();
        }
    };
});

该指令负责计算在特定区域应显示多少行“服装”。 在我的一个观点中，我像这样调用了两次：

<div configurator-rows="controller.sportswear" colours="controller.colours" ng-if="controller.sportswear.length">
</div>

<div configurator-rows="controller.leisurewear" colours="controller.colours" ng-if="controller.leisurewear.length"> 
</div>

到目前为止一切顺利，在这个页面上，我根据它们的类型（运动服的休闲装）列出了不同的服装，一切正常。 该指令的模板如下所示：

<div class="row flex-xs" ng-repeat="row in rows">
    <div class="col-md-4 col-sm-6 text-center flex-xs flex-end" ng-repeat="garment in row track by $index">
        <div class="kit-template" configurator="garment" colours="colours" designs ng-if="garment"></div>
    </div>
</div>

正如您所看到的，这里还有另一个指令，它只是为每一行中的每件衣服显示一个 SVG 图像。 现在，我有另一个区域（在同一视图中），其中列出了所有服装并以略有不同的方式显示它们。 同样的规则适用，所以我想使用我的configuratorRows指令，但问题是“模板”是不同的，我希望它看起来像这样：

<div class="row">
    <div class="col-xs-4 total-item" ng-repeat="garment in kit.garments">
        <div class="row">
            <div class="col-xs-4 kit-template" configurator="garment" colours="colours" designs></div>

            <div class="col-xs-8">
                <h4 class="total-title">{{ garment.title }}</h4>
                <p>Quantity: <button class="btn btn-xs btn-primary" type="button" ng-disabled="garment.quantity <= 10" ng-click="modifyQuantity(garment)"><span class="fa fa-minus"></span></button> <span class="text-black">{{ garment.quantity }}</span> <button class="btn btn-xs btn-primary" type="button" ng-click="modifyQuantity(garment, true)"><span class="fa fa-plus"></span></button></p>
            </div>
        </div>
    </div>
</div>

我开始了允许 templateUrl 覆盖的路线，但后来我意识到我放置该指令的区域也是一个指令，并且具有分配给每个位的功能（检查数量按钮）。

所以我的下一个选择是在没有模板的情况下制作configuratorRows指令，而只使用 ng-transclude 。 问题在于，在一个视图中拥有多个configuratorRows似乎会混淆每个的范围。 所以在一个我可能有 4 行，但在另一个我可能有 2 行。

有谁知道我如何优雅地解决这个问题？

Answer 1

我不确定我是否正确理解您的目标，但是如果您想更改指令模板，则可以在指令中执行以下操作：

templateUrl: function(element,attrs){
    return attrs.type==='all' ? 'configuratorRows.all.tpl.html' :  'configuratorRows.single.tpl.html'; 
}

用法：

<div type="single" configurator-rows="controller.leisurewear" colours="controller.colours" ng-if="controller.leisurewear.length"></div>
<div type="all" configurator-rows="controller.leisurewear" colours="controller.colours" ng-if="controller.leisurewear.length"></div>

Answer 2

您可以做的一件事是创建两个不同的模板文件configuratorBase.html和configuratorAlt.html并将它们附加到共享范围的两个不同指令（即一个非隔离范围）。

.directive('configuratorBase', [function() {
    var configuratorBase = {
        restrict: 'AE',
        templateUrl: '/path/to/configuratorBase.html'
    };
    return configuratorBase;
});

那么您的配置器指令可能如下所示：

.directive('configurator', ['$compile', function($compile) {
    var configurator = {
        restrict: 'AE',
        link: configuratorLink(scope, element, attributes, controllers) {
            /** if evaluating you need the base */
            var template = angular.element('<configuratorBase/>');
            $compile(element.append(template))(scope);
        }
    };
    return configurator;
});

Answer 3

如果您正在寻找相同模板结构的“完全不同的演示文稿”，您可能需要不同的 css 方法（例如，在 sass 中，查看bem 方法）

如果您需要不同的模板结构，则必须在运行时选择模板（例如，基于范围的templateUrl属性）。

 angular .module('test', []) .directive('tpl', function() { return { scope: { type: '@' }, restrict: 'E', //templateUrl: function(elem, attr){ template: function(elem, attr){ console.log('suca'); var tpl = ''; switch((attr.type || '').toLowerCase()) { case 'heading': tpl += '<h1>Heading</h1>'; break; default: tpl += '<div">Normal Div Element </div>'; } return tpl; } }; })

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <article data-ng-app="test"> <tpl data-type="heading"></tpl> <tpl></tpl> </article>