0

我需要在模板中使用嵌入式脚本，但在脚本运行之前动态插入图像路径。

我编写了一个指令来将图像路径构建为范围变量，然后用于$interpolate将其插入到<script>标签中。

现在存储的引用（作为字符串）$scope.tag是我希望像脚本标签一样注入和解释/运行的代码。

然而，脚本标签作为字符串添加到我的模板中，我似乎无法确定需要采取哪些额外步骤才能将脚本标签字符串实际输出为脚本标签。

这是模板（在指令中称为templateUrl）：

<div>
  {{ tag }}
</div>

指示：

'use strict';

angular.module('App')
  .directive('sslLogo', function($location, $interpolate) {
    return {
      replace: false,
      restrict: 'AE',
      templateUrl: '/views/partials/ssl-logo.html',
      controller: function($scope, $element, $attrs) {
        // Outputs the full base url (http:// ... .com/ )
        var base_url = '';
            base_url += $location.protocol() + '://';
            base_url += $location.host();

            if ( $location.port() ) {
              base_url += ':' + $location.port();
            }

        // Add the path to the image asset.
        $scope.logo_url = base_url + "/images/static/comodo-wildcardssl.png";

        // Interpolate this path into the script tag and then store the script tag to be output to the template.
        $scope.tag = $interpolate('<script type="text/javascript">TrustLogo("{{ logo_url }}", "SCCC", "none");</script>', false, true)({ logo_url: $scope.logo_url });
      },
      link: function(scope, element, attrs) {}
    };
  });

作为参考，此时$scope.tag变量将包含以下字符串：

<script type="text/javascript">TrustLogo("http://localhost:9000/images/static/comodo-wildcardssl.png", "SCCC", "none");</script>
4

1 回答 1

0

看起来：

...
link: function(scope, element, attrs) {
  element.append( scope.tag );
}
...

使用 jQuery 将脚本标签附加到指令元素的作品。

于 2014-07-31T23:57:50.343 回答