Question

我在应用程序的前端有角度，html字符被插值和渲染。数据来自后端CMS。

几乎所有锚点值都链接到其内部文本的值。

例如：

<a href="http://google.com" target="_blank">http://google.com</a>

我不想重复输入相同的模式，而是希望用指令扩展a标签：

app.directive('a', function(){
return{
    link: function(scope, element, attrs){
        var value = $(element)[0].innerText;
        if(!attrs.href){
            attrs.href = value;
        }
        if(!attrs.target){
            attrs.target = '_blank';
        }
    }
  }
})

我的数据通过这样的绑定变成了角色：

<div class="issue-article-abstact">
    <h6 class="main-section" realign>Abstract</h6>
    <p ng-bind-html="article.abstract | to_trusted"></p>
</div>

＆＃34; article.abstract＆＃34;将是一个包含<a>http://google.com</a>

的json对象

目前这只会拾取未通过插值在页面上呈现的锚标记。是否可以创建一个指令，该指令将通过绑定在页面上查看值，并通过这样的指令扩展其功能？

Answer 1

Angular不会编译使用ng-bind-html插入的html。

您可以使用第三方模块来执行此操作，但是在插入数据之前，您还可以在服务，控制器，自定义过滤器或httpInterceptor中进行转换。

以下使用jQuery，因为它似乎将它包含在页面中

简单示例：

function parseLinks(html) {
  // create container and append html
  var $div = $('<div>').append(html),
    $links = $div.find('a');
  // modify html  
  $links.not('[href]').attr('href', function(i, oldHref) {
    return $(this).text();
  });

  $links.not('[target]').attr('target', '_blank');
  // return innerHtml string
  return $div.html();
}

$http.get('/api/items').then(function(resp){
    var data = resp.data;
    data.forEach(function(item){
       item.abstract = parseLinks(item.abstract);
    });
    return data;
});

这比在dom中使用指令

编译所有html更有效

具有内插值指令的角度扩展锚元素

1 个答案: