javascript - 指令不返回 html 元素

Question

我有点难以理解我试图传递名称的指令，我希望该指令返回 <img>成一张 table 。

这里是在 Controller 中定义名称的方式:

$scope.name = 'foo';

这是html

<tr>
    <th>status</th>
    <td><icon-selector filterby="name"></icon-selector></td>
</tr>

这是指令

angular.module('myApp')
    .directive('iconSelector', function ($compile) {

    return {
        restrict: 'E',
        scope:{
            filterby:'='
        },

        link: function(scope,element, attrs) {
            console.log(scope.filterby);
            if (scope.filterby === 'foo') {
                   return '<img src="sample.png">';
            }else {
                 return '<p>invalid</p>';
            }
         }
      };
  });

理想情况下，当指令处理 {{name}} 时，它在浏览器中应该如下所示:

<tr>
    <th>status</th>
    <td><img src="sample.png"></td>
</tr>

有人可以告诉我我做错了什么吗，一个 plunker 演示将不胜感激。

Answer 1

链接函数不会返回 HTML 元素来替换应用指令的元素。 link函数一般用于注册事件监听器和DOM操作。如果你想替换元素，你可以这样做:

link: function(scope,element, attrs) {
  console.log(scope.filterby);
  if (scope.filterby === 'foo') {
    element.replaceWith('<img src="sample.png">');
  } else {
    element.replaceWith('<p>invalid</p>');
  }
}