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

Question

我正试图使用此方法在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:谷歌未定义。。。

我尝试了不同的方法将其绑定到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指令中吗？

Answer 1

我认为您试图延迟加载脚本。请看下面的帖子，它可能会有所帮助。如何在AngularJS中异步加载谷歌地图？

Answer 2

让我尽可能地解释这个场景：）<script>标记在web应用程序中仅评估一次。与img标签不同的是，src属性可以在整个应用程序中分配给不同的值，因此会重新评估。因此，发生的情况是，有时当编译器到达脚本标记时，模型（vCustom.googleMapApi.src）会被解析，因此它工作正常，但有时不会，因为angular中的$digest循环（事件循环）尚未完成对模型的解析，因此API键未正确传递给脚本标记，导致无法加载google maps API，它抛出错误。在这种情况下，要进行验证，请检查chrome调试器上的脚本标记，它将不会解析正确的API密钥，也不会加载API脚本。

---

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

希望这能有所帮助。