Question

我正在创建一个如下所示的角度指令，以在标题中显示徽标。背景图片没有出现，我怀疑这是因为单引号内的引号错误。任何人都可以帮我解决这个问题吗？

angular.module("Common")
            .directive("mainHeader", [
                function () {
                    /// <summary>Markup for the main header section</summary>
                    return {
                        restrict: "E",
                        template: 
    '<header class="row"' +
        '<div class="col-md-12 logo-container">' +
            '<div class="logo" style="background:url(""/Content/Images/ey_login_logo.png""/) left top no-repeat;"></div>' +
        '</div>' +      
    '</header>'
                    };
                }
            ])

我获得上述代码的输出是：

<div class="logo" style="background:url(" "="" content="" images="" ey_login_logo.png""="" )="" left="" top="" no-repeat;"=""></div>

由于

Answer 1

从url部分
中的style部分删除双引号

style="background:url(/Content/Images/ey_login_logo.png/) left top no-repeat;"

Answer 2

使用template literals：

可以避免此问题

angular.module("Common")
.directive("mainHeader", function () {
    /// <summary>Markup for the main header section</summary>
    return {
      restrict: "E",
      template:` 
.       <header class="row">
          <div class="col-md-12 logo-container">
            <div class="logo" style="background:url(/Content/Images/ey_login_logo.png) left top no-repeat;">
            </div>
          </div>
        </header>`
    };
})

angular1.x指令中单引号内的双引号无效

2 个答案: