指令不返回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演示將不勝感激。

來源

2014-11-05 Simple-Solution

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

來源

2014-11-05 19:24:51 Brennan

我已經包含了'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>

來源

2014-11-05 19:51:48 sylwester

指令不返回html元素

回答

相關問題