Javascript AngularJS-从json文件加载其src时不显示iframe

我正在使用AngularJS 1加载一个.json文件，其中包含我正在使用的iFrame的源（请参见下面的控制器）：

问题是在知道json文件已正确加载的情况下，iFrame根本没有显示在我的页面上

您需要知道json文件中的URL都是https格式的，我认为这就是造成问题的原因

在html中，我有：

  <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6" ng-controller="iFrames">
                <div class="panel">
                  <div class="panel-body">
                    <h3 class="text-center" style="color:white"><div id="changeStat"><span data-i18n="mainTranslation.user.house.consommation"></span></div></h3>
                    <div id="statRealTime" ng-repeat="iframe in iframes" >
                       <iframe ng-src="{{(iframe.src)}}" width="420" height="75" frameborder="0"></iframe>
                    </div>

                    <div id="statHistory" style="display: none" ng-repeat="iframe in iframes" >
                      <iframe ng-src="{{(iframe.srcHist)}}" width="420" height="75" frameborder="0"></iframe>

                    </div>
                  </div>
                </div>
              </div>

我的文件是本地的，我也试着把它放在一个远程服务器上，但还是一样的问题

非常感谢您的帮助……

您需要使用：

myApp.controller（'iFrames'，['$scope'，'$http'，'$sce'，函数（$scope，$http，$sce）{
console.log（“进入加载IFRAME”）；
$http.post（'../json/iframes.json'）.success（函数（数据）{
console.log（“加载成功”）；
$scope.iframes=数据；
对于（变量i=0；i<$scope.iframes.length；i++）{
$scope.iframes[i].srcHist=$sce.trustAsUrl（$scope.iframes[i].srcHist）
}
});
控制台日志（“离开加载IFRAME”）；
}]);

您需要使用：

myApp.controller（'iFrames'，['$scope'，'$http'，'$sce'，函数（$scope，$http，$sce）{
console.log（“进入加载IFRAME”）；
$http.post（'../json/iframes.json'）.success（函数（数据）{
console.log（“加载成功”）；
$scope.iframes=数据；
对于（变量i=0；i<$scope.iframes.length；i++）{
$scope.iframes[i].srcHist=$sce.trustAsUrl（$scope.iframes[i].srcHist）
}
});
控制台日志（“离开加载IFRAME”）；
}]);

@Websirnik的答案大部分是正确的，但我没有使用

$sce.trustAsUrl

（它不断产生相同的错误），而是尝试使用

$sce.trustAsResourceUrl

，它可以工作：

myApp.controller('iFrames', ['$scope', '$http', '$sce', function($scope, $http, $sce){
console.log("ENTERING LOADING IFRAME");
    $http.post('../json/iframes.json').success(function(data){
    console.log("LOADING SUCCESSFULL");
    $scope.iframes = data;
    for(var i = 0; i < $scope.iframes.length; i++){
        $scope.iframes[i].srcHist = $sce.trustAsResourceUrl($scope.iframes[i].srcHist)
    }

});
console.log("LEAVING LOADING IFRAME");
}]);

myApp.controller（'iFrames'，['$scope'，'$http'，'$sce'，函数（$scope，$http，$sce）{
console.log（“进入加载IFRAME”）；
$http.post（'../json/iframes.json'）.success（函数（数据）{
console.log（“加载成功”）；
$scope.iframes=数据；
对于（变量i=0；i<$scope.iframes.length；i++）{
$scope.iframes[i].srcHist=$sce.trustAsResourceUrl（$scope.iframes[i].srcHist）
}
});
控制台日志（“离开加载IFRAME”）；
}]);

@Websirnik的答案大部分是正确的，但我没有使用

$sce.trustAsUrl

（它不断产生相同的错误），而是尝试使用

$sce.trustAsResourceUrl

，它可以工作：

myApp.controller('iFrames', ['$scope', '$http', '$sce', function($scope, $http, $sce){
console.log("ENTERING LOADING IFRAME");
    $http.post('../json/iframes.json').success(function(data){
    console.log("LOADING SUCCESSFULL");
    $scope.iframes = data;
    for(var i = 0; i < $scope.iframes.length; i++){
        $scope.iframes[i].srcHist = $sce.trustAsResourceUrl($scope.iframes[i].srcHist)
    }

});
console.log("LEAVING LOADING IFRAME");
}]);

myApp.controller（'iFrames'，['$scope'，'$http'，'$sce'，函数（$scope，$http，$sce）{
console.log（“进入加载IFRAME”）；
$http.post（'../json/iframes.json'）.success（函数（数据）{
console.log（“加载成功”）；
$scope.iframes=数据；
对于（变量i=0；i<$scope.iframes.length；i++）{
$scope.iframes[i].srcHist=$sce.trustAsResourceUrl（$scope.iframes[i].srcHist）
}
});
控制台日志（“离开加载IFRAME”）；
}]);

单击该错误创建的链接。。。角度误差现场将提供解释。或者使用angular的完整开发版本获取更详细的错误和堆栈跟踪输出单击该错误创建的链接。。。角度误差现场将提供解释。或者使用angular的完整开发版本获得更详细的错误和堆栈跟踪输出谢谢！你救了我一天：）谢谢你！你救了我一天：）

myApp.controller('iFrames', ['$scope', '$http', '$sce', function($scope, $http, $sce){
    console.log("ENTERING LOADING IFRAME");
        $http.post('../json/iframes.json').success(function(data){
        console.log("LOADING SUCCESSFULL");
        $scope.iframes = data;
        for(var i = 0; i < $scope.iframes.length; i++){
            $scope.iframes[i].srcHist = $sce.trustAsUrl($scope.iframes[i].srcHist)
        }

    });
    console.log("LEAVING LOADING IFRAME");
}]);

myApp.controller('iFrames', ['$scope', '$http', '$sce', function($scope, $http, $sce){
console.log("ENTERING LOADING IFRAME");
    $http.post('../json/iframes.json').success(function(data){
    console.log("LOADING SUCCESSFULL");
    $scope.iframes = data;
    for(var i = 0; i < $scope.iframes.length; i++){
        $scope.iframes[i].srcHist = $sce.trustAsResourceUrl($scope.iframes[i].srcHist)
    }

});
console.log("LEAVING LOADING IFRAME");
}]);