Variable inside quotes - Angular

Asked

Viewed 793 times

1

I am building a hybrid APP with Ionic, this uses Angular and I am not very familiar with JS.

The point is that I need to insert a Youtube video into the file and ran into the following question: The video link comes from an external API and therefore needs to be entered into the code by a variable and yet I can’t make it work.

Follows a code that exemplifies the problem, where video does not appear in the iframe.

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<title>AngularJs</title>
</head>
<body ng-app>
<div ng-controller="Ctrl">
<p>Link: {{link}}</p>
</div>

<iframe src="{{ link }}" frameborder="0" allowfullscreen="" width="560" height="315" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe>

<script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
<script>
function Ctrl($scope){
  $scope.link = "https://www.youtube.com/watch?v=Hl3aJms0xGQ";
}
</script>
</body>
</html>

The same occurs in this case:

<button id="encontrar-button1" class="button button-balanced  button-block icon-left ion-plus-circled" onclick="window.open('http://www.site.com/pagina/{{ url }}/{{ .id }}/', '_system', 'location=yes'); return false;">Link</button>

angularjs ionic

1 answer

1

In case of embedding Youtube videos I recommend you use a directive for this... example: Directive : 

app.directive('youtubeIframe', function($sce) {
      return {
        restrict: 'EA',
        scope: { videoid:'=' },
        replace: true,
        template: '<div style="height:400px;"><iframe width="420" height="315" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
        link: function (scope) {
            scope.$watch('videoid', function (value) {
               if (value) {
                   scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + value);
               }
            });
        }
      };
    });

And in your HTML just add the directive by passing the ID of the video that Voce wants to soak: 

<div youtube-iframe videoid="CcFxvOBohvM"></div>

Example of the code:

var app = angular.module('app', [])
app.controller('Ctrl',function($scope, $window) {
  $scope.videoId = 'Hl3aJms0xGQ';
  
  $scope.open = function() {
    $window.open('https://www.google.com','', 'width=500,height=500')
  }

});
app.directive('youtubeIframe', function($sce) {
  return {
    restrict: 'EA',
    scope: {
      videoid: '='
    },
    replace: true,
    template: '<div style="height:400px;"><iframe width="420" height="315" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function(scope) {
      scope.$watch('videoid', function(value) {
        if (value) {
          scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + value);
        }
      });
    }
  };
});
<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://code.angularjs.org/1.2.1/angular.min.js"></script>
  <title>AngularJs</title>
</head>

<body ng-app='app'>
  <div ng-controller="Ctrl">
    <button ng-click="open()">Link</button>
    <div youtube-iframe videoid="videoId"></div>
  </div>
</body>

</html>

  • It worked for the video. What about the second case, window.open? Thank you for replying Jhonny.

  • I updated the code but Stackoverflow is blocking the popup. Here’s the same example on Jsfiddle. But if your intention is to make a window "popup" you could try working with modals this would avoid future problems with popup blockers -> Modals Ionic

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.