CODEWITHSUNDEEP
angularjs
Peter Boomsma
Peter Boomsma

Reputation: 9844

How to pass a value into a directive?

I'm using a directive to insert a youtube player in my templates,

app.directive('youtube', function($window, youTubeApiService) {

  return {
    restrict: "E",
    scope: {
      videoid: "@"
    },
    template: '<div></div>',
    link: function(scope, element, attrs, $rootScope) {
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;

      youTubeApiService.onReady(function() {
        player = setupPlayer(scope, element);
      });

      function setupPlayer(scope, element) {
        return new YT.Player(element.children()[0], {
          playerVars: {
            autoplay: 0,
            html5: 1,
            theme: "light",
            modesbranding: 0,
            color: "white",
            iv_load_policy: 3,
            showinfo: 1,
            controls: 1
          },
          videoId: scope.videoid,
        });
      }

      scope.$watch('videoid', function(newValue, oldValue) {
        if (newValue == oldValue) {
          return;
        }
        Player.cueVideoById(scope.videoid);
      });

    }
  };
});

My html looks something like this,

<div class="container-info">
  <ul class="trailers">
    <li><a href="#">ePbKGoIGAXY</a></li>
    <li><a href="#">KlyknsTJk0w</a></li>
    <li><a href="#">nyc6RJEEe0U</a></li>
    <li><a href="#">zSWdZVtXT7E</a></li>
    <li><a href="#">Lm8p5rlrSkY</a></li>
  </ul>
  <div class="container-trailers">
    <youtube videoid="ePbKGoIGAXY"></youtube>
  </div>
</div>

What I want to do is click on one of the links and then change the value of videoid so a different youtube link is rendered.

<div class="container-info">
  <ul class="trailers">
    <li><a href="#">ePbKGoIGAXY</a></li>
    <li><a href="#">KlyknsTJk0w</a></li>
    <li><a href="#">nyc6RJEEe0U</a></li>
    <li><a href="#">zSWdZVtXT7E</a></li> <-- clicked element
    <li><a href="#">Lm8p5rlrSkY</a></li>
  </ul>
  <div class="container-trailers">
    <youtube videoid="zSWdZVtXT7E"></youtube> <-- new youtube link
  </div>
</div>

Upvotes: 2

Views: 146

Answers (1)

michelem
michelem

Reputation: 14590

You can use $watch and ng-click:

JSFiddle

HTML:

<div ng-app="app">
  <div class="container-info">
    <ul class="trailers">
      <li><a href="#" ng-click="videoid = 'ePbKGoIGAXY'">ePbKGoIGAXY</a></li>
      <li><a href="#" ng-click="videoid = 'KlyknsTJk0w'">KlyknsTJk0w</a></li>
    </ul>
    <div class="container-trailers">
      <youtube videoid="videoid"></youtube>
    </div>
  </div>
</div>

JS:

var app = angular.module("app", []);
app.directive('youtube', function($window) {
  return {
    restrict: "E",
    scope: {
      videoid: "="
    },
    template: '<div></div>',
    link: function(scope, element, attrs, $rootScope) {
      scope.$watch('videoid', function (newVal, oldVal) {
        console.log(newVal);
      });
    }
  };
});

Upvotes: 1

Related Questions