Variable within quotation marks - Angular

Question

Variable within quotation marks - Angular

Navigation

#1 by (1 votes)

1

I'm building a hybrid with ionic APP, this one uses the Angular and I'm not very familiar with JS.

The issue is that I need to insert a YouTube video in the sentence and I ran into the following question: The video link comes from an external API and I need to be inserted in the code by a variable and, however, I can not do work.

Following is 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><bodyng-app><divng-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>functionCtrl($scope){$scope.link="https://www.youtube.com/watch?v=Hl3aJms0xGQ";
}
</script>
</body>
</html>

The same thing happens 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

asked by anonymous 01.04.2016 / 03:01

1 answer

How to get a specific region of an iframe? Scroll down automatic scroll bar in chat div (window)

score 1 · Answer 1

In case you embed videos from Youtube I recommend you use a directive for this ... example: Policy:

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 you want to embed:

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

Code sample:

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><scriptsrc="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>