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

回答

相关问题