AngularJS 错误：$interpolate:interr 与 $routeParams 的插值错误答案

【问题标题】：AngularJS Error: $interpolate:interr Interpolation Error with $routeParamsAngularJS 错误：$interpolate:interr 与 $routeParams 的插值错误
【发布时间】：2016-08-30 20:51:12
【问题描述】：

我正在尝试将动态链接从 json 加载到我的 iframe 模板中。当我加载 iframe 页面时，会弹出此错误。我真的不知道为什么。这是我第一次看到这个错误。这是下面的代码。

控制器

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'}">

【问题讨论】：

标签： javascript angularjs iframe angular-routing

【解决方案1】：

我解决了这个问题。我将控制器中的代码更改为此，它运行良好。

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);
    }
});

}]);

【讨论】：

【解决方案2】：

你不能在 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'}">

Similar answer

【讨论】：