如何在AngularJS中结合Webpack的require实现按item动态加载HTML模板？

Got it, let's solve this dynamic template loading problem for your triMenuItemDirective using Webpack's require system. The key here is using Webpack's require context to pre-bundle all possible templates (so Webpack knows about them upfront), then loading the correct one based on your item property. Here's how to implement it step by step:

1. Organize Your Template Files #

First, move all your menu item templates into a dedicated folder (e.g., ./menu-templates/). This makes it easy for Webpack to find and bundle them. For example:

• ./menu-templates/menu-item-dropdown.html
• ./menu-templates/menu-item-simple.html
• ./menu-templates/menu-item-divider.html

2. Update the Directive to Support Dynamic Loading #

Instead of a static template, we'll use a lightweight template that renders the dynamically loaded content via ng-bind-html. Here's the revised directive code:

export function triMenuItemDirective() {
  const directive = {
    restrict: 'E',
    require: '^triMenu',
    scope: { item: '=' },
    bindToController: true,
    controller: triMenuItemController,
    controllerAs: 'triMenuItem',
    // Use a simple wrapper template to render the dynamic content
    template: '<div ng-bind-html="::triMenuItem.getTrustedTemplate()"></div>'
  };

  return directive;
}

3. Modify the Controller to Load Templates Safely #

Update your triMenuItemController to use Webpack's require context to fetch the right template, and use AngularJS's $sce service to mark the HTML as safe for rendering:

export class triMenuItemController {
  constructor($sce) {
    this.$sce = $sce;
    // Create a Webpack require context to bundle all template files in our folder
    this.templateContext = require.context('./menu-templates', false, /\.html$/);
  }

  getTrustedTemplate() {
    // Assume `this.item.template` holds the filename of the desired template (e.g., "menu-item-dropdown.html")
    const templateHtml = this.templateContext(`./${this.item.template}`);
    // Mark the HTML as trusted so AngularJS will render it
    return this.$sce.trustAsHtml(templateHtml);
  }
}

// Don't forget to inject the $sce dependency
triMenuItemController.$inject = ['$sce'];

4. Configure Webpack to Load HTML Files #

Make sure you have the html-loader installed and configured in your Webpack setup. This loader lets Webpack import HTML files as plain strings, which is exactly what we need here. Add this rule to your webpack.config.js:

module.exports = {
  // ... other config
  module: {
    rules: [
      {
        test: /\.html$/,
        use: 'html-loader'
      }
    ]
  }
};

Why This Works #

• Webpack Require Context: The require.context call tells Webpack to bundle all .html files in the ./menu-templates folder, even though they're referenced dynamically. This ensures all possible templates are included in your final bundle.
• One-Time Binding: Using :: in ng-bind-html="::triMenuItem.getTrustedTemplate()" ensures the template is loaded once and doesn't re-render on every digest cycle, improving performance.
• Safe HTML Rendering: AngularJS blocks untrusted HTML by default, so $sce.trustAsHtml marks our loaded template content as safe to display.

Key Notes #

• Ensure your item.template property matches the exact filename (including .html extension) of the template in your menu-templates folder.
• If you need to support subfolders in your templates, adjust the second argument of require.context from false to true.

内容的提问来源于stack exchange，提问作者Joe