如何使用 $sce 服务从 AngularJS 中的变量设置 iFrame 的 src 属性？

从 AngularJS 中的变量设置 iFrame src 属性

要从 AngularJS 中的变量设置 iframe 的 src 属性，必须将 $sce 服务注入到控制器中.

控制器修改

在 AppCtrl 中，注入 $sce 依赖项：

<code class="js">function AppCtrl ($scope, $sce) {
    // ...
}</code>

然后，在 setProject 函数中，使用 trustAsResourceUrl 信任 URL：

<code class="js">$scope.setProject = function (id) {
    $scope.currentProject = $scope.projects[id];
    $scope.currentProjectUrl = $sce.trustAsResourceUrl($scope.currentProject.url);
}</code>

模板修改

在模板中，在 ng-src 属性中使用 currentProjectUrl 变量：

<code class="html"><iframe ng-src="{{currentProjectUrl}}"></iframe></code>

这种方法确保 AngularJS 安全地处理 URL，并且防止潜在的跨站点脚本漏洞。

以上是如何使用 $sce 服务从 AngularJS 中的变量设置 iFrame 的 src 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！