AngularJS에서 변수를 사용하여 iframe의 src 속성을 설정하는 방법은 무엇입니까?

AngularJS에서 변수를 사용하여 iframe src 속성 설정

문제:

변수에서 iframe의 src 속성 설정 AngularJS가 작동하지 않아 속성이 비어 있습니다.

코드에서 발췌:

<code class="javascript">function AppCtrl($scope) {

    // ...

    $scope.setProject = function (id) {
        $scope.currentProject = $scope.projects[id];
        console.log( $scope.currentProject );

    }
}</code>

<code class="html"><div class="col-xs-12" ng-controller="AppCtrl">

    <ul class="">
        <li ng-repeat="project in projects">
            <a ng-click="setProject(project.id)" href="">{{project.url}}</a>
        </li>
    </ul>

    <iframe  ng-src="{{trustSrc(currentProject.url)}}">
        Something wrong...
    </iframe>
</div></code>

해결책:

문제는 컨트롤러에 trustSrc 함수 정의가 누락되어 있다는 것입니다. 변수를 사용하여 src 속성을 설정하려면 AngularJS의 $sce 서비스를 사용하여 URL을 신뢰해야 합니다.

<code class="javascript">function AppCtrl($scope, $sce) {

    // ...

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

<code class="html"><iframe  ng-src="{{currentProjectUrl}}">
    <!-- Replace the text with actual content -->
</iframe></code>

$sce 서비스를 삽입하고 trustAsResourceUrl을 사용하여 URL이 다음과 같은지 확인합니다. 신뢰할 수 있는 것으로 취급되며 iframe의 src 속성으로 설정할 수 있습니다.

위 내용은 AngularJS에서 변수를 사용하여 iframe의 src 속성을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!