I'm using the Ionic starter tabs example app to test ionic framework. There is a json list that populates the chats page. I want specific map links sent via json, which is run on an iframe. Hardcoding a single link works (checked on devices , map displayed) but I'm unable to use a angjs variable for source.
<iframe width="500" height="400" ng-src="{{chats.map}}"></iframe>
Is something wrong with my code or how do you apply iframes in ionic the angular way?
Chat Controller
.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);
})
JSON FIle (services.js)
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;
}
};
});
it would also be really easy to do it this way, someone clicks on a link or item or whatever you bound the click event to, when clicked fire a function that passes in the index, then have that function run a window.open(maplink, '_blank'). This will open up the map, or if you use '_system' instead of blank it will open maps.google.com links in the google maps app and if on iphones you make the link maps.apple.com in the link it will use apple maps Example:
<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');
}
};