Javascript 使用json在Ionic框架中编写iframe链接

我正在使用Ionic starter选项卡来测试Ionic框架。有一个json列表填充聊天页面。我希望通过json发送特定的映射链接，json在iframe上运行。硬编码单个链接是可行的（在设备上检查，显示地图），但我无法将angjs变量用于源代码

<iframe width="500" height="400" ng-src="{{chats.map}}"></iframe>

JSON文件（services.js）

angular.module（'starter.services'，[]）
.factory（'Chats'，function（）{
//此处可能使用返回JSON数组的资源
//一些虚假的测试数据
变量聊天=[{
id:0，
名字：'本斯派洛'，
lastText:“你在路上吗？”，
脸：'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png',
地图：'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
}, {
id:1，
名称：“Max Lynx”，
lastText:'嘿，是我'，
脸：'https://avatars3.githubusercontent.com/u/11214?v=3&s=460',
地图：'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
},{
id:2，
姓名：“亚当·布拉德利森”，
lastText:“我应该买条船”，
脸：'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg',
地图：'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
}, {
id:3，
姓名：“佩里州长”，
最后一段文字：“看看我的mukluks！”，
脸：'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png',
地图：'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
}, {
id:4，
名字：“迈克·哈林顿”，
最后一段文字：“这是非常好的冰淇淋。”，
脸：'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png',
地图：'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
}];
返回{
全部：函数（）{
回访聊天；
},
删除：功能（聊天）{
chats.splice（chats.indexOf（chat），1）；
},
获取：函数（chatId）{
for（var i=0；i

这样做也很容易，有人单击链接或项目或您将单击事件绑定到的任何东西，当单击时启动一个传入索引的函数，然后让该函数运行一个窗口。打开（maplink，“\u blank”）。这将打开地图，或者如果您使用“_system”而不是空白，它将在谷歌地图应用程序中打开maps.google.com链接，如果您在iPhone上使用链接maps.apple.com，它将使用苹果地图 例如：

见地图
$scope.seemap=函数（$index）{
如果（$scope.stopdata[$index].MapLink==”http://maps.google.com/?q=0.0000000,-0.0000000") {
$scope.showAlert（）；
}else if（ionic.Platform.isIOS（）==true）{
$scope.map=$scope.stopdata[$index].MapLink.replace（“http://maps.google", "http://maps.apple");
window.open（$scope.map，“_system”）；
}否则{
$scope.map=$scope.stopdata[$index].MapLink；
window.open（$scope.map，“_system”）；
}
};

您也可以提供您的json吗？这里将其添加到原始问题中，我为所有人使用了占位符映射，但每个人都将包含一个不同的占位符映射。我得到一个空白的iframe位置，使用这个with angjs变量。其余的都可以，但只有iframe一个不行。我在地图上标记了自定义的路线和位置，最好在里面打开。我可以用html iframe硬编码，但我想通过JSONY实现，你仍然可以用我的方法通过json实现。只需根据索引中的单击和传递重新分配$scope.map即可。so$scope.map=arrayofmapdata[index].maplink；使用“_blank”在应用程序中整齐地打开它”，同时确保你有InApp浏览器cordova Pluginca。如果你放了一个代码笔/git或其他东西，我很抱歉，但我无法跟进你试图解释的内容。我的应用程序的ionic命令是$ionic start myApp选项卡。请看上面的代码，我在ng重复列表中的卡上使用ng单击。ng click在卡的索引中传递。seemap函数获取该索引并使用它在我的json中查找关联的映射链接。然后，我使用该链接调用window.open函数，并传入“\u system”，因为我想在本机应用程序中打开该链接。或者，如果您想在应用浏览器中打开它，可以使用“\u blank”选项

.controller('ChatsCtrl', function($scope, Chats) {

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  }
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

angular.module('starter.services', [])

.factory('Chats', function() {
  // Might use a resource here that returns a JSON array

  // Some fake testing data
  var chats = [{
    id: 0,
    name: 'Ben Sparrow',
    lastText: 'You on your way?',
    face: 'https://pbs.twimg.com/profile_images/514549811765211136/9SgAuHeY.png',
    map: 'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
  }, {
    id: 1,
    name: 'Max Lynx',
    lastText: 'Hey, it\'s me',
    face: 'https://avatars3.githubusercontent.com/u/11214?v=3&s=460',
    map: 'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
  },{
    id: 2,
    name: 'Adam Bradleyson',
    lastText: 'I should buy a boat',
    face: 'https://pbs.twimg.com/profile_images/479090794058379264/84TKj_qa.jpeg',
    map: 'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
  }, {
    id: 3,
    name: 'Perry Governor',
    lastText: 'Look at my mukluks!',
    face: 'https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png',
    map: 'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
  }, {
    id: 4,
    name: 'Mike Harrington',
    lastText: 'This is wicked good ice cream.',
    face: 'https://pbs.twimg.com/profile_images/578237281384841216/R3ae1n61.png',
    map: 'https://www.google.com/maps/d/embed?mid=zlCyVs6i4TFM.kY2_D9mPzxhg'
  }];

  return {
    all: function() {
      return chats;
    },
    remove: function(chat) {
      chats.splice(chats.indexOf(chat), 1);
    },
    get: function(chatId) {
      for (var i = 0; i < chats.length; i++) {
        if (chats[i].id === parseInt(chatId)) {
          return chats[i];
        }
      }
      return null;
    }
  };
});

<div ng-click="seemap($index)">See Map</div>  



 $scope.seemap = function ($index) {
            if ($scope.stopdata[$index].MapLink == "http://maps.google.com/?q=0.0000000,-0.0000000") {
                $scope.showAlert();
            } else if (ionic.Platform.isIOS() === true) {
                $scope.map = $scope.stopdata[$index].MapLink.replace("http://maps.google", "http://maps.apple");
                window.open($scope.map, '_system');
            } else {
                $scope.map = $scope.stopdata[$index].MapLink;
                window.open($scope.map, '_system');
            }

        };