Javascript 指令未返回html元素

我有点难以理解指令，我试图传入一个名称，我希望指令返回一个

；
}否则{
返回“无效”
”；
}
}
};
});

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

$scope.name = 'foo';

地位

---

如果有人能告诉我我做错了什么，请给我一个plunker演示

链接函数不会返回HTML元素来替换应用该指令的元素。

link

函数通常用于注册事件侦听器和DOM操作。如果要替换元素，可以执行以下操作：

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

链接：函数（范围、元素、属性）{
console.log（scope.filterby）；
如果（scope.filterby==='foo'）{
元素。替换为（“”）；
}否则{
元素。替换为（“无效”
”）；
}
}

或者您可以通过以下方式执行此操作：

var-app=angular.module（'app'，[]）；
应用指令（'iconSelector'，函数（$compile）{
返回{
限制：'E'，
范围：{
filterby:“@”
},
模板：“
无效
”，
链接：函数（范围、元素、属性）{
scope.condition=scope.filterby==“foo”；
scope.url=http://www.saturn.dti.ne.jp/npaka/android/HelloGL10_5/sample.png';
}
};
});
app.controller（'firstCtrl'，函数（$scope）{
});
td，th{
边框：实心1px#d2d2d2
}

地位
为什么
foo
会导致
sample.png
？我加入了'scope.watch'，这样在$scope.name发生变化时调用它，但它只执行一次。是否有一种方法可以在更新时调用直接链接函数。现在，只有当我刷新浏览器时，如果name的值动态更改，它才会得到更新。你能帮我吗，布伦南。干杯你的手表看起来像什么？您在哪里更改$scope.name？
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>';
            }
         }
      };
  });

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

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>');
  }
}