AngularJS中iframe视图向控制器传值问题求助

看起来你遇到的核心问题是：直接操作DOM元素的value属性不会触发AngularJS的脏检查机制，所以虽然你更新了input的显示值，但$scope里的currPage和totalPages并没有同步，$watch自然也监听不到变化。下面是具体的解决方案和修改后的代码：

问题根源 #

当你用document.getElementById('getpage').value = p手动修改DOM值时，AngularJS完全不知道这个变化——它的双向绑定依赖于自身的脏检查循环，只有在Angular上下文内（比如ng-click、$scope方法里）修改数据才会自动触发这个循环。你之前把方法放在视图里能更新DOM，但这只是修改了页面元素，并没有同步到Angular的$scope中。

解决方案步骤 #

1. 将getPage和getTotalPage移到Angular控制器中，直接操作$scope变量
2. 在方法中手动触发脏检查（因为iframe的调用属于Angular上下文外的操作）
3. 让iframe中的ViewerJS通过父页面的Angular scope调用这些方法

修改后的ViewingResCtrl控制器代码 #

angular.module('yourAppModule').controller('ViewingResCtrl', ['$scope', '$sce', 'dataToPass', function($scope, $sce, dataToPass) {
    $scope.data = dataToPass;
    $scope.currPage = 0;
    $scope.totalPages = 0;
    
    // 处理ng-src的安全信任（必须注入$sce）
    $scope.url = $sce.trustAsResourceUrl("/ViewerJS/#../Uploads/" + $scope.data.filename);

    $scope.$watch('currPage', function (newval, oldval) {
        console.log('当前页面变化：', newval, oldval);
    });

    // 定义供iframe调用的方法
    $scope.getPage = function(p) {
        $scope.currPage = p;
        // 手动触发脏检查，同步$scope到DOM
        $scope.$apply();
    };

    $scope.getTotalPage = function(p) {
        $scope.totalPages = p;
        $scope.$apply();
    };
}]);

修改后的viewres.cshtml视图代码 #

去掉视图中的<script>部分，因为方法已经移到控制器中了：

@{ Layout = null; } 
<md-dialog aria-label="Uploading" flex="50" md-whiteframe="10">
    <md-toolbar>
        <div class="md-toolbar-tools dark-primary-color">
            <h2>{{data.title}}</h2>
        </div>
    </md-toolbar>
    <md-dialog-content>
        <div layout="column" layout-align="center center" style="overflow:hidden!important;">
            <iframe ng-src="{{url}}" allowfullscreen webkitallowfullscreen height="500" width="700" id="viewId"></iframe>
            <input type="text" ng-model="totalPages" id="totalPages">
            <input type="text" ng-model="currPage" id="getpage">
        </div>
    </md-dialog-content>
</md-dialog>

iframe中ViewerJS的调用方式 #

在ViewerJS的翻页事件触发时，通过父页面的Angular scope调用控制器方法：

// 当ViewerJS获取到当前页码p时
parent.angular.element(document.getElementById('viewId')).scope().getPage(p);

// 当ViewerJS获取到总页数total时
parent.angular.element(document.getElementById('viewId')).scope().getTotalPage(total);

额外说明 #

• $sce的必要性：AngularJS会阻止不安全的资源URL，所以必须用$sce.trustAsResourceUrl处理你的iframe地址，否则ng-src不会生效。
• $apply()的作用：因为iframe的调用是在Angular的上下文之外，所以需要手动调用$scope.$apply()来触发脏检查，让Angular同步$scope的值到DOM，同时触发$watch监听。

内容的提问来源于stack exchange，提问作者pryxen