Question

我有点难以理解我正在尝试传递名称的指令，我希望指令将<img>返回到表中。

这里是控制器中定义的名称：

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

Answer 2

或者你可以这样做：

＆＃13;

var app = angular.module('app', []);
app.directive('iconSelector', function($compile) {

  return {
    restrict: 'E',
    scope: {
      filterby: '@'
    },
    template: "<img ng-if='condition' src='{{url}}'/ ><p ng-if='!condition'>invalid</p>",
    link: function(scope, element, attrs) {

      scope.condition = scope.filterby == "foo";


      scope.url = 'http://www.saturn.dti.ne.jp/npaka/android/HelloGL10_5/sample.png';
    }
  };
});
app.controller('firstCtrl', function($scope) {

});

＆＃13;

td, th {
border: solid 1px #d2d2d2
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <table>
      <tr>
        <th>status</th>
        <td>
          <icon-selector filterby="foo"></icon-selector>
        </td>
        <td>
          <icon-selector filterby="jam"></icon-selector>
        </td>
      </tr>
    </table>

  </div>
</body>

＆＃13;

指令不返回html元素

2 个答案: