指令不返回html元素

问题描述：

我有点努力让我的头在指令的位置，我试图传入一个名称，我希望指令将<img>返回到表中。指令不返回html元素

这里是名在控制器如何定义的：

$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演示将不胜感激。

为什么'foo'导致' sample.png'？ – dfsq 2014-11-05 19:22:30

答

链接函数不会返回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>'); 
    } 
}

我已经包含了'scope。$ watch'，所以如果$ scope.name发生变化，它只会被执行一次。有没有办法在更新时调用直接链接函数？现在只有当名称的值动态变化时刷新浏览器才会更新它。你能帮我Brenan吗？欢呼 – 2014-11-06 23:14:55

你的手表是什么样的？你在哪里改变$ scope.name？ – Brennan 2014-11-07 01:38: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) { 
 

 
});

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

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

指令不返回html元素

相关推荐