0

I have built a wordpress plugin where users can insert the google map code like this one:

<iframe src="https://www.google.com/maps/embed?pb=xxxxx" width="100%" height="100%" frameborder="0" style="border:0"></iframe>

this code is stored in wp-database and I try to get it from inside my angularjs code..

getMaps();  
function getMaps(){ 
    $http.post("wp-content/themes/koplan/pages/getMaps.php").success(function(mapsdata){
        $scope.maps = mapsdata;
    });
};

My question is: How can I bind/render the iframe in front-end php/html? I've tried <div ng-bind-html=maps> but nothing showed up.

Is there anyother way?? Please help me, Thanks

Teguh Supriyadi
  • 75
  • 11
  • Why can't you bind? What does it say? – trainoasis Dec 17 '14 at 08:20
  • @trainoasis no warning in console, data (the iframe tag) is viewing if I render with {{}} , but if I render with ng-bind-html the maps still blank.. I just want to convert the iframe tag to view the maps by using angular – Teguh Supriyadi Dec 17 '14 at 08:28
  • Probably you just have to use trustashtml ? https://docs.angularjs.org/api/ng/service/$sce#methods_trustashtml – trainoasis Dec 17 '14 at 08:31

1 Answers1

0

Probably what you need is sce since I guess your iframe is not accepted as a trusted HTML.

So, after including sce into your controller like

app.controller("MainController", ['$scope', '$http','$sce', function($scope, $http, $sce){

, you would do 

$scope.maps = $sce.trustAsHtml(mapsdata);

See this question/answer also.

Also, for other HTML data that you are sure are 'safe' to display, you can use this filter:

app.filter('unsafe', function($sce) {
   return function(val) {
      return $sce.trustAsHtml(val);
   };
});

You can use it with 

ng-bind-html="yourHTMLdataVariable | unsafe"
Community
  • 1
  • 1
trainoasis
  • 6,419
  • 12
  • 51
  • 82
  • hey @trainoasis thanks for angularjs documentation , I passed that. and thank you for a link to that case.. thanks for your answer I will try that. – Teguh Supriyadi Dec 17 '14 at 08:52
  • I have try by your suggestion, and error showed up "Error: [$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html" I forget that mapsdata was an json.encode.response so that value was an array because it's a more than one maps how do I get fix this problem?? – Teguh Supriyadi Dec 17 '14 at 08:55
  • Did you call trustAsHtml twice on the same variable perhaps? using filter AND inside angular code? You only have to use one of those approaches. Also make sure you passed a string value to trustAsHtml ? use 'typeof' to show variable type. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof – trainoasis Dec 17 '14 at 08:56
  • thanks for useful answer, btw I'm not using your filter unsafe because I was using that and still not work. The problem is solved by spliting them (`mapsdata`) one by one / convert to string, not an array can `trustAshtml` . only string can so , I split `mapsdata` one by one and not doing `ng-repeat` to view them. Thanks @trainoasis – Teguh Supriyadi Dec 17 '14 at 09:10
  • hey.. sorry I have a little problem. I think you could help.. you may look at this http://stackoverflow.com/q/27517288/4368559 – Teguh Supriyadi Dec 19 '14 at 01:33