角。在标签 <script> 中发送 html 模板内的变量答案

【问题标题】：Angularjs. Send variable inside html template in tag <script>角。在标签 <script> 中发送 html 模板内的变量
【发布时间】：2015-06-17 16:26:23
【问题描述】：

我在指令 html 模板中有这个小部件代码。

<script type="text/javascript">
  _hcwp = window._hcwp || [];
  _hcwp.push({widget:"Stream", widget_id:10862, xid:{{_id}});
  (function() {
  if("HC_LOAD_INIT" in window)return;
  HC_LOAD_INIT = true;
  var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage || "en").substr(0, 2).toLowerCase();
  var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
  hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/10862/"+lang+"/widget.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hcc, s.nextSibling);
  })();

在这个模板里面有一个变量 {{_id}}。

但是当角度渲染这个模板时，变量不会在模板内发送。

在某些时候必须在 Temple 内发送一个变量进行渲染？

我的指令：

app.directive('hyperComments', function($timeout) {
return {
    restrict: 'E',
    templateUrl: './templates/hc.html',
    replace: true,
    scope: {
      xid: '='
    },
    link: function(scope, element, attrs) {
    console.log('hello!');
    $timeout(function() {
        _hcwp = window._hcwp || [];
        _hcwp[0]= { widget:"Stream", widget_id: 28172, xid: 31241123};
        // HC.widget("Stream", _hcwp);

        (function() {
          // if("HC_LOAD_INIT" in window)return;
          // var HC_LOAD_INIT = true;
          console.log('in');
          var lang = (navigator.language || navigator.systemLanguage || navigator.userLanguage ||  "en").substr(0, 2).toLowerCase();
          var hcc = document.createElement("script"); hcc.type = "text/javascript"; hcc.async = true;
          hcc.src = ("https:" == document.location.protocol ? "https" : "http")+"://w.hypercomments.com/widget/hc/9345/"+lang+"/widget.js";
          var s = document.getElementsByTagName("script")[0];
          console.log(s);
          s.parentNode.insertBefore(hcc, s.nextSibling);
          })();
    }, 10000);

}
};

});

模板：

由 HyperComments 提供支持的 cmets

【问题讨论】：

你能提供你的模板和指令的完整代码吗？
@AvraamMavridis 我证明了完整的代码。

标签： javascript angularjs directive

【解决方案1】：

字符串中有不匹配的括号

_hcwp.push({widget:"Stream", widget_id:10862, xid:{{_id}});

不管怎样，它在语法上不正确并且会抛出错误，Angular 不会解析 <script> 的内容。

此外，Angular 不处理模板中的 <script> 标签（安全问题或 jqlite 实现的过度简化），所以

app.directive('sample', function () {
  return {
    scope: {},
    controller: function ($scope, $window) {
      $scope.bar = 'test';
      $window.foo = $scope.bar
    },
    link: function (scope, element, attrs, ctrl) {
      var scriptInane = element.find("script")[0];
      var script = document.createElement("script");
      script.innerHTML = scriptInane.innerHTML;
      scriptInane.parentNode.replaceChild(script, scriptInane); 
    },
    template: '<h1>test</h1><script>console.log(foo); alert(foo);<\/script>'
  };
});

添加angular.forEach 以支持多个脚本。如果你加载了 jQuery，你可以用不那么冗长的方式做同样的事情。

或者您可以在指定全局变量的位置将 <script> 与另一个（因为 DOM 已经混乱）放在前面，这样您就可以跳过 $window.foo = 部分。

无论如何，这似乎是另一种“不要在家里尝试”的做法，可能有更好的方法来嵌入这个小部件。

【讨论】：