Javascript AngularJS错误:$interpolate:interr插值错误与$routeParams
我正在尝试将json到的动态链接加载到iframe模板中。加载iframe页面时,会弹出此错误。我真的不知道为什么。这是我第一次看到这个错误。下面是代码 控制器Javascript AngularJS错误:$interpolate:interr插值错误与$routeParams,javascript,angularjs,iframe,angular-routing,Javascript,Angularjs,Iframe,Angular Routing,我正在尝试将json到的动态链接加载到iframe模板中。加载iframe页面时,会弹出此错误。我真的不知道为什么。这是我第一次看到这个错误。下面是代码 控制器 app.controller('apps', [ '$scope', '$http', 'contentService', 'gotoService', 'getIndex', '$routeParams', function($scope, $http, contentService, gotoService, getInde
app.controller('apps', [
'$scope',
'$http',
'contentService',
'gotoService',
'getIndex',
'$routeParams', function($scope, $http, contentService, gotoService, getIndex, $routeParams){
contentService.then(function(data){
$scope.data = data; // access all data
$scope.appsList = $scope.data.appsList; // list of shortcuts
// change url to links
$scope.goTo= function(url){
gotoService.getLink(url);
}
// get index
$scope.getIndex = function(index){
getIndex.current(index);
}
// embed in iframe
$scope.link = function(){
$scope.indexRoute = $routeParams.index;
return $scope.appsList[$scope.indexRoute].url;
}
});
}]);
iframe模板
<iframe ng-controller="apps" ng-src="{{link()}}" width="800" height="600">
</iframe>
应用程序图标模板
<div class="apps-background" ng-click="goTo(a.link+'/'+$index); getIndex($index);" ng-style="{'background-image':'url({{a.image}})', 'background-repeat': 'no-repeat', 'background-size': 'cover'}">
在ng样式的指令表达式中不能有插值指令,您需要如下所示对其进行更正
<div class="apps-background"
ng-click="goTo(a.link+'/'+$index); getIndex($index);"
ng-style="{'background-image': 'url('+ a.image + ')', 'background-repeat': 'no-repeat', 'background-size': 'cover'}">
我解决了这个问题。我把控制器中的代码改成了这个,它工作得很好
app.controller('apps', [
'$scope',
'$http',
'contentService',
'gotoService',
'getIndex',
'$routeParams',
'$sce', function($scope, $http, contentService, gotoService, getIndex, $routeParams, $sce){
contentService.then(function(data){
$scope.data = data; // access all data
$scope.data = data; // access all data
$scope.appsList = $scope.data.appsList; // list of shortcuts
// change url to links
$scope.goTo= function(url){
gotoService.getLink(url);
}
// get index
$scope.getIndex = function(index){
getIndex.current(index);
}
// embed in iframe
$scope.link = function(){
$scope.indexRoute = $routeParams.index;
return $sce.trustAsResourceUrl($scope.appsList[$scope.indexRoute].url);
}
});
}]);