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

我有一个应用程序的前端有内插和呈现html字符的角度。数据来自后端CMS。带有内插值指令的角度扩展锚点元素

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

例如：

<a href="http://google.com" target="_blank">http://google.com</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>

“article.abstract”是一个包含的json对象

当前只会拾取锚点标记，这些标记不会通过插值呈现在页面上。是否有可能创建一个指令，通过绑定来查看页面上的值，并通过像这样的指令来扩展它们的功能？

来源

2016-01-20 byrdr

不清楚哪些元素没有受到影响以及它们如何进入dom。提供足够的细节来重现问题。还要注意，不需要在'$（）'中包装'element' ...它已经是jQuery或jQlite对象 – charlietfl

我已经添加了一些更多的细节，解释了数据在页面上的呈现方式 – byrdr

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更高效

来源

2016-01-20 16:48:58 charlietfl

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

回答

相关问题