将表达式绑定到 ng-src 指令答案

【问题标题】：binding an expression into ng-src directive将表达式绑定到 ng-src 指令
【发布时间】：2016-07-21 18:09:43
【问题描述】：

我正在尝试使用此方法在 ng-src 指令中加载 google map api 链接..

<script ng-src="{{trustSrc(vCustom.googleMapApi.src)}}"></script>

在我的控制器中我有..

v.googleMapApi = { src: "https://maps.googleapis.com/maps/api/js?key=" + config.googleApiKey + "&libraries=places" };

$scope.trustSrc = function (src) {
        return $sce.trustAsResourceUrl(src);
    }

有时有效，有时无效.. 错误

ReferenceError: google 未定义...

我尝试了不同的方法将它绑定到 ng-src 指令中，但没有成功..

当我添加此脚本<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 时它可以工作，但它不能动态工作.. 有什么帮助吗？？

没有语法错误，我的控制器是ng-controller="Custom as vCustom"

有什么建议可以在 ng-src 指令中绑定它吗？

【问题讨论】：

bind script element's src attribute 请阅读此内容。希望你能得到答案

标签： angularjs

【解决方案1】：

我认为您正在尝试延迟加载脚本。请看下面的帖子，它可能会有所帮助。 How to asyncronously load a google map in AngularJS?

【讨论】：

不，先生，情况并非如此，问题是绑定在 ng-src 属性中。如果我硬编码谷歌地图脚本，它就像一个魅力，即<script src="map.google.apis....."></script>

【解决方案2】：

让我尽可能地解释这个场景:) <script> 标记在 Web 应用程序中只评估一次。与img 标签不同，src 属性可以在整个应用程序中分配给不同的值，因此会被重新评估。所以发生的事情是，有时当编译器到达你的脚本标签时，模型（vCustom.googleMapApi.src）被解析，所以它工作正常但有时它不是因为角度中的$digest循环（事件循环）还没有完成解析模型，因此 API 密钥未正确传递给脚本标记，导致未加载谷歌地图 API，然后在您使用地图的地方，它会引发错误。在这种情况下，要验证，请检查 chrome 调试器上的脚本标签，它不会解析正确的 API 密钥，也不会加载 api 脚本。

现在的问题是解决方案是什么。您可以实现一个最初解析 APIKey 模型的指令，然后将脚本标记附加到您的 HTML 中，或者在您现在使用它时使用硬编码值（我通常在大多数代码和示例中看到它是硬编码的）已经看到）。注意：即使您实施了此类指令，您也必须确保您使用的是 google maps apiAFTER 您的指令已执行并且您'已经加载了地图 api。

希望这会有所帮助。

【讨论】：