Question

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

<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指令中绑定它的任何建议？

Answer 1

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

Answer 2

让我试着尽可能地解释这个场景:) <script>标记仅在Web应用程序中评估一次。与img标记不同，src标记可以在整个应用中将vCustom.googleMapApi.src属性分配给不同的值，因此会重新评估。所以正在发生的事情是，有时当编译器到达你的脚本标记时，模型（$digest）被解析，因此它工作正常，但有时却没有，因为角度为scala> import scalaz.Reader, scalaz.syntax.applicative._ import scalaz.Reader import scalaz.syntax.applicative._ scala> import scala.reflect.runtime.universe.{ reify, showCode } import scala.reflect.runtime.universe.{reify, showCode} scala> type ReaderInt[A] = Reader[Int, A] defined type alias ReaderInt scala> showCode(reify("hello".point[ReaderInt]).tree) res0: String = `package`.applicative.ApplicativeIdV("hello").point[$read.ReaderInt](Kleisli.kleisliIdMonadReader)循环（事件循环）尚未完成解析模型，因此API密钥未正确传递给脚本标记，这导致未加载谷歌地图API，然后在您使用地图的地方，它会抛出错误。在这种情况下，要验证，检查chrome调试器上的脚本标记，它将无法解析正确的API密钥，并且不会加载api脚本。

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

希望这有帮助。

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

2 个答案: