Javascript 在ng repeat中加载指令（动态模板URL）

我为

ng repeater

中的模板使用创建了两个自定义指令

在ng中继器之外，指令工作。一旦我尝试在

ng中继器

中动态加载指令，指令就根本不会加载。事实上，当使用“Inspect元素”时，

{{expressions}

不会动态更新

以下是我的ng中继器的外观：

<div ng-repeat="section in content">
  <section class="section-{{ section.block }}" block="{{ section.block }}">{{ section.block }}</section>
</div>

以下是templateURL：

<div class="container">
    <figure class="icon">
        <img class="img-fluid" ng-src="{{ block.icon }}" title="App Icon">
    </figure>
    <h1>{{ block.title }}</h1>
    <figure class="hero">
        <img class="img-fluid" ng-src="{{ block.image }}" title="App">
    </figure>
</div>

现在，我相信templateUrls没有加载，因为它似乎是在ng repeat获取其内容之前执行的指令。我认为我需要做的是在ng repeat收到内容后执行指令。我不知道从哪里开始

---

谢谢。

您不能通过动态传递其名称来使用指令

但一种可能的解决方法是使用ng开关：

<div ng-repeat="section in content">
<div ng-switch="section.block">
    <section ng-switch-when="header" class="section-header" block="{{ section.block }}">{{ section.block }}</section>
    ... another ng-switch...
</div>

{{section.block}
... 另一个ng开关。。。

---

有关更多详细信息，请参见

，您可以使用该功能实现该功能

请参见上的示例

使用

$compile

创建通用指令。 用法

---

尽管@stepan kasyanenko给了我一个正确的答案-我进一步删除了不需要的额外代码行以最小化构建

新增答案

home.html

旧的：

我在两个

指令中都添加了
replace:true，
，因为
ng repeat
在
元素内部构建了另一个

谢谢@stepan kasyanenko
在StackOverflow上不鼓励仅链接帖子。请在回答中包含链接的重要部分。谢谢。这就成功了。它甚至只是在JS中增加了10行。与使用
ng include
s相比，在
ng repeat
中使用
指令
s构建动态模板有什么好处？从字面上看，昨晚读到
ng include
s在
ng repeat
中构建模板会损害web速度的性能。
$scope.content = [
      {
        block: 'header',
        icon: 'http://www.placehold.it/128x128?text=PLACEHOLpng',
        title: 'Header Title',
        image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
      },...
];

<div ng-repeat="section in content">
<div ng-switch="section.block">
    <section ng-switch-when="header" class="section-header" block="{{ section.block }}">{{ section.block }}</section>
    ... another ng-switch...
</div>

.directive('section', function($compile) {
return {
  restrict: 'EAC',
  scope: {
    block: '='
  },
  link:function(scope,elem){
    if(scope.block)
      $compile(elem.html('<section-'+scope.block.block+' block="block">'))(scope);
  }
};
})

 .directive('sectionHeader', function() {
return {
  restrict: 'EAC',
  scope: true,
  templateUrl: 'sectionHeader.html'
};
})

.directive('sectionHundred', function() {
return {
  restrict: 'EAC',
  scope: true,
  templateUrl: 'sectionHundred.html'
};
});

<div ng-repeat="section in content">
  <section  block="section"></section>
</div>

 [
  {
    block: 'header',
    icon: 'http://www.placehold.it/128x128?text=PLACEHOLpng',
    title: 'Header Title',
    image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
  },
  {
    block: 'hundred',
    icon: 'http://www.placehold.it/128x128?text=PLACEHOLpg',
    title: 'Hundred Title',
    content: 'Hundred Content',
    link: {
      copy: 'Link Copy',
      title: 'Link Title',
      url: '#'
    },
    image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
  }
];

<div ng-repeat="section in content">
   <section  block="section"></section>
</div>

<section ng-repeat="section in content" block="section"></section>

.directive('sectionHeader', function() {
    return {
      restrict: 'EAC',
      replace: true,
      scope: true,
      templateUrl: 'sectionHeader.html'
    };
  });