AngularJS 1.x指令中单引号内嵌套双引号失效问题求助

嘿，我一眼就看出问题所在了——你在模板字符串里嵌套引号的方式错了，导致浏览器解析style属性的时候彻底乱套了！

问题根源 #

你原来的代码里，style属性用双引号包裹，而url里又错误地嵌套了重复的双引号，JavaScript解析时会把内部的双引号当成模板字符串的结束标记，最终输出的HTML就变得乱七八糟，和你贴出来的异常输出完全对应上了。

三种解决方案 #

下面给你几个可行的修复方法，按推荐程度排序：

• 方案1：使用ES6模板字符串（最推荐）
  如果你的项目支持ES6，用反引号`包裹整个模板，这样就不用纠结引号嵌套和转义的问题，代码可读性也更高：

  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>
          `
        };
      }
    ])
  

  这种方式下，你可以直接写正常的HTML结构，引号按照常规方式使用就行，完全不用转义。

• 方案2：转义内部双引号
  在要嵌套在字符串里的双引号前加上反斜杠\，告诉JavaScript这是字符串的一部分，不是结束符：

  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>'
        };
      }
    ])
  

  这里把原来错误的url(""/.../"")改成了url(\\"/...\\")，转义后的双引号就能被正确解析。

• 方案3：改用单引号包裹URL路径
  因为模板外层是用单引号拼接的，所以可以把url里的双引号换成转义后的单引号，逻辑更直观：

  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>'
        };
      }
    ])
  

修复后的正常输出 #

修改完成后，页面会输出正确的HTML结构：

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

内容的提问来源于stack exchange，提问作者Mukil Deepthi