在AngularJS中使用ng-src指令可以动态绑定图片、视频等媒体资源的URL。然而，当我们尝试在一个iframe元素中使用ng-src指令时，可能会遇到一些问题。这篇文章将详细介绍AngularJS中的ng-src和iframe结合使用的技巧。
ng-src指令简介
ng-src指令是AngularJS中用来动态绑定某个元素的src属性的指令。它通常用于图片、音频、视频等媒体资源的加载，也可以用于其他类型的资源。使用ng-src指令可以避免在页面加载之前浏览器对src属性进行解析，从而提高页面加载速度，并且可以使得代码更加易于维护。
<img ng-src="{{vm.imageUrl}}" alt="dynamic image">在上面的代码中，ng-src指令绑定了一个变量vm.imageUrl，这个变量的值将在运行时动态地决定该图片的URL地址。这样做可以避免在页面加载时浏览器自动解析图片URL导致的性能消耗。
iframe元素中使用ng-src指令
在一些场景下，我们需要在iframe中嵌入一个包含动态资源的页面，例如：
<iframe src="http://example.com/dynamic-resource"></iframe>
在这种情况下，如果src属性的值是一个动态生成的URL地址，我们就需要使用ng-src指令来动态地绑定。
<iframe ng-src="{{vm.dynamicResourceUrl}}"></iframe>然而，在实际使用中，我们可能会发现当我们使用ng-src指令时，iframe中的内容并没有按照我们预期的方式加载。这是因为在iframe中使用ng-src指令时，AngularJS框架将在当前页面的上下文环境中进行解析，而不是在iframe的上下文环境中进行解析。
解决方案
为了解决这个问题，我们需要使用一些技巧。首先，我们可以通过使用$sce.trustAsResourceUrl()函数来标记我们动态生成的URL地址是安全的，从而避免浏览器的安全限制。其次，我们还需要使用$compileProvider服务中的aHrefSanitizationWhitelist()方法来允许特定的URL地址被嵌入到iframe中。
angular.module('myApp', [])
.controller('myController', function ($scope, $sce) {
$scope.dynamicResourceUrl = $sce.trustAsResourceUrl('http://example.com/dynamic-resource');
})
.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|blob):/);
});在上面的代码中，我们使用了$sce.trustAsResourceUrl()函数将我们的URL地址标记为安全的。同时，我们还使用了$compileProvider.aHrefSanitizationWhitelist()方法来允许特定的URL地址被嵌入到iframe中。
示例代码
下面是一个完整的示例代码，它演示了如何在AngularJS中使用ng-src指令来加载一个动态资源，并将其嵌入到一个iframe元素中。
-- -------------------- ---- -------
--------- -----
----- ---------------
------
----- ----------------
---------------- ------ ------ -- --------------
-------
----- -----------------------------
------- -----------------------------------------
------- ------------------------------------------------------------------------------------
--------
----------------------- ---
--------------------------- -------- -------- ----- -
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------