Question

export function triMenuItemDirective() {
      var directive = {
        restrict: 'E',
        require: '^triMenu',
        scope: {
          item: '='
        },
        // replace: true,
        template: require('./menu-item-dropdown.tmpl.html'),
        controller: triMenuItemController,
        controllerAs: 'triMenuItem',
        bindToController: true
      };
      return directive;
    }

我需要根据item加载不同的html。

用旧方式你可以做到：

template: '<div ng-include="::triMenuItem.item.template"></div>',

在控制器

中

triMenuItem.item.template = 'app/components/menu/menu-item-' + triMenuItem.item.type + '.tmpl.html';

我如何使用webpack实现这一目标？

像

这样的东西

template: require('./menu-item-{{triMenuItem.item.type}}.tmpl.html'),

Answer 1

我认为要做到这一点，你至少有三种不同的方法：

1-使用$templateCache然后将字符串变量传递给ng-include

.directive('myDirective', ['$templateCache', function ($templateCache) {
    return {
        scope: {
            item: '='
        },
        template: '<div ng-include="content"></div>',
        link: function (scope) {
            $templateCache.put('a.tpl.html', require('./a.html'));
            $templateCache.put('b.tpl.html', require('./b.html'));

            scope.content = (scope.item === 'a') ? 'a.tpl.html' : 'b.tpl.html';
        }
    }

}]);

2-使用ng-bind-html 。

app.directive('myDirective', ['$sce', function ($sce) {
    return {
        scope: {
            item: '='
        },
        template: '<div ng-bind-html="content"></div>',
        link: function (scope) {
            if(scope.item === 'a')
                scope.content = $sce.trustAsHtml(require('./a.html'));
        }
    }

}]);

3-使用ng-if。也许是三者中不那么动态的解决方案，但如果你的要求让你这么做就很简单。

app.directive('myDirective', function () {
    return {
        scope: {
            bool: '='
        },
        template: `
            <div>
                <div ng-if="item === 'a'">${require('./a.html')}</div>
                <div ng-if="item === 'b'">${require('./b.html')}</div>
            </div>
        `
    }

});

如何使用require（webpack）与动态字符串，angularjs

1 个答案: