在ng-repeat

Question

Plunker Demo

我在ng-repeater中为模板使用创建了两个自定义指令。

在ng-repeater之外，指令有效。一旦我尝试在ng-repeater中动态加载指令，指令就根本不加载。事实上 - 当使用＆＃34; Inspect Element＆＃34; - {{expressions}}不动态更新。

以下是我的ng-repeater的样子：

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

我通过restrict: C

调用指令

以下是其中一条指令：

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

这是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>

以及JSON的片段：

$scope.content = [
      {
        block: 'header',
        icon: 'http://www.placehold.it/128x128?text=PLACEHOLpng',
        title: 'Header Title',
        image: 'http://www.placehold.it/1200x675?text=PLACEHOLDER'
      },...
];

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

感谢。

Answer 1

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

但可能的解决方法是使用ng-switch代替：

<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>

有关详细信息，请参阅this post

Answer 2

您可以使用$compile功能实现此目的。

请参阅plunker上的示例。

使用$compile创建通用指令。

.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>

JSON数据：

 [
  {
    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'
  }
];

Answer 3

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

添加了答案的新Plunker Link。

<强> home.html的

旧：

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

新：

ng-repeat

我将<section>放置在调用directive

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

<强>指令

replace: true,

我向directive添加了ng-repeat，因为<section>在<section ng-repeat>元素内构建了另一个global

谢谢@ stepan-kasyanenko