AngulajrJS過濾器輸出html

嗨我正在寫一個過濾器，它採取和數組並返回一個逗號分隔的字符串。當我追加一些HTML它沒有顯示在輸出中。AngulajrJS過濾器輸出html

下面是我的代碼

$scope.authors = [{ "authorName": 'Robin', "price": 40, "link": 'http://www.google.com' }, 
        { "authorName": 'Chetan', "price": 400, "link": 'http://www.bing.com' }, 
        { "authorName": 'Jack Wilson', "price": 450, "link": 'http://www.facebook.com'} 
]

我篩選

myApp.filter('formatAuthorName', function() { 

    return function (input) { 
     var str = []; 
     var totalString = ''; 
     if (input.length > 1) { 

      for (var i = 0; i < input.length; i++) { 
       var name = input[i]; 
       **str.push('<a href='**name.link**'>'+name.authorName+'</a>');** 
      } 
      totalString = str.join(', '); 
      return totalString; 

     } 
     return totalString; 

    }; 
});

如何綁定HREF從範圍鏈接??。

感謝

來源

2014-07-11 user804401

自定義指令是更適合於比濾波器輸出HTML。 – pixelbits

我稍後會重構一個指令，但截至目前有什麼方法可以解決使用過濾器 – user804401

輸出HTML的與範圍相互作用，指令更加適合表比過濾器。

這個答案擴展了最初由ajk提出的解決方案。

Demo Plunker

指令

app.directive('formatAuthorNames', function() { 
     return { 
     restrict: 'A', 
     scope: { authors: '=' }, 
     template: 
      '<span ng-repeat="author in authors"> 
      <a ng-href="{{ author.link }}">{{ author.authorName }}</a> 
      <span ng-if="$index < authors.length-1">, </span> 
      </span>', 
      link: function(scope, elem, attr) { 
       // access scope here 
      } 
     } 
    });

HTML

<body ng-app="app" ng-controller='MyController'> 
     <div authors="authors" format-author-names></div> 
    </body>

來源

2014-07-11 06:10:10 pixelbits

我認爲一個指令是有點矯枉過正，但仍然是一個堅實的例子，所以+1。你把它與模型（作者）緊密耦合在一起，以至於它可能會使得很難重用，比如'publishers'。 IMOE我發現從模型中分離指令以保持多用途和功利性是有幫助的。即而不是'作者'，'nameLinks' ...'ng-repeat = nameLinks中的名字... ...然後我可以將它用於作者，公司，汽車等等。 – cerd

我認爲範圍和綁定類型的本質使得您可以將指令與對象模型相符。如果你建議將對象模型推廣到更一般的東西，我同意。 – pixelbits

+1這是我的建議的合理擴展 - 很好的工作，並感謝您的點頭。 – ajk

嘗試使用ng-href，而不是一個過濾器

https://docs.angularjs.org/api/ng/directive/ngHref

希望這有助於。

來源

2014-07-11 05:40:10 link

我不確定過濾器是您真正在這裏尋找的。您可能會更好地使用ng-repeat結合ng-href。事情是這樣的：

<div ng-repeat="author in authors"> 
    <a ng-href="{{ author.link }}">{{ author.authorName }}</a> 
</div>

來源

2014-07-11 05:40:50 ajk

應該始終還是要放一個href =「」鏈接。 – cerd

@cerd我不知道爲什麼這是必要的。我見過的大多數用於ng-href的示例根本不包含純粹的href屬性。在與更有經驗的Angular人交談時，我還沒有找到添加href =「」的好理由。你能指出任何理由嗎？我真的很好奇！ – ajk

不正式。但是，我們在沒有它的情況下有SEO問題。 – cerd

使用$ SCE在你的過濾器，如果你想渲染HTML：

<div ng-bind-html="authors | formatAuthorName"></div>

JS：

app.filter('formatAuthorName', ['$sce', 
    function($sce) { 

     return function(input) { 
      var str = []; 
      var totalString = ''; 
      if (input.length > 1) { 

       for (var i = 0; i < input.length; i++) { 
        var name = input[i]; 
        str.push('<a href=' + name.link + '>' + name.authorName + '</a>'); 
       } 
       totalString = str.join(', '); 

      } 

      return $sce.trustAsHtml(totalString); 

    }; 
    } 
]);

DEMO PLUNKER

來源

2014-07-11 05:44:57 Raghavendra

謝謝，這就像一個魅力 – user804401

AngulajrJS過濾器輸出html

回答

相關問題