角从内部指令串删除/ - 似乎屠夫HTML [英] Angular removing / from strings within Directive - seems to butcher html

问题描述

我有一个问题（只是学习角）用字符串有任何 / 删除并替换为 =。

I'm having an issue (just learning Angular) with a string having any / removed and replaced with ="".

我有一个指令，需要它的元素，然后用 DIV 并提供了一​​些样式应用到 DIV - 即背景网址 - 这是一个正在用别的东西代替了网址

I have a directive that takes it's element and then wraps it with a div and provides some styling to the div - namely a background-url - it is the URL that is being replaced with something else.

这可能是一个有点古怪 - 什么，我其实是想在这里做的 - 这是很正常的;我只是想多学一点有关元素的角度和简单的操作似乎是一个好地方，鼓捣..

It may be a little odd - what I am actually trying to do here - and that's ok; i'm just trying to learn a little more about Angular and simple manipulation of elements seems a good place to tinker..

下面是我：

HTML - 请注意图片上的设置背景属性

HTML - notice the set-background attribute on the image.

<div id="home">
        <img src="~/Content/Images/Site/home-background.jpg" set-background />
</div>

角指令

dwApp.directive('setBackground', function () {

    return {
        restrict: 'A',
        scope: {},
        link: function (scope, element, attrs) {

            element.addClass('backgroundCover');
            var bgImg = 'style="background-image:url("' + attrs.src + '");'           
            element.wrap('<div class="backgroundCoverContainer" ' + bgImg + '></div>');
            element.remove();

        }        
    }
});

生成的HTML - 注意背景网址

<div id="home">
        <div class="backgroundCoverContainer" style="background-image:url(" content="" images="" site="" home-background.jpg");=""></div>
</div>

如果我的console.log（bgImg）我得到：

style="background-image:url("/Content/Images/Site/home-background.jpg"); 

显然，背景图片实际上没有被渲染一样，虽然...

Clearly, the background-image isn't actually being rendered like that though...

什么想法？

推荐答案

好了，所以我的屁股......

Ok, so i'm an ass....

Charlietfl的评论把我在正确的方向 - 感谢

Charlietfl's comment put me in the right direction - thanks.

我只是缺少结束的风格..

I was simply missing the closing " to the style..

我的JS WAS

var bgImg = 'style="background-image:url("' + attrs.src + '");'

当它应该是 - 注意最后一个

When it should have been - notice the last "

var bgImg = 'style="background-image:url(' + attrs.src + ');"'

或

var bgImg = 'style="background-image:url(\'' + attrs.src + '\');"'

让我有更多的指令，像这样的 - 也去掉了element.addClass - 看到，因为我反正删除它....：D

Giving me the directive more like this - also removed the element.addClass - seeing as I was removing it anyway.... :D

dwApp.directive('setBackground', function () {

return {
    restrict: 'A',
    scope: {},
    link: function (scope, element, attrs) {
        var bgImg = 'style="background-image:url(\'' + attrs.src + '\');"'
        element.wrap('<div class="backgroundCover" ' + bgImg + '></div>');
        element.remove();
    }        
}
});

这篇关于角从内部指令串删除/ - 似乎屠夫HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！