Can't bind 'player' attribute value to an ng-repeat model value

[Jake Allen]

Hi there,

I'm having trouble with using dynamic values for the 'player' attribute.

With this kind of data in the controller:

    $scope.feed = [

    {

      'desc': 'This is the description of the first video.',
      'url': 'https://youtu.be/28xjtYY3V3Q&html5=True',
      'views': 0,
      'likes': 0,
      'source': 'YouTube', 
      'media-type': 'video',
      'playerName': 'uniqueIdOne'

    },
    {

      'desc': 'This is the description of the first video.',
      'url': 'https://www.youtube.com/watch?v=LfmA3HNgOoQ&index=1&list=PLliKax3vGO6EdIxRgVm4XiZuCnQI-Z7uL',
      'views': 0,
      'likes': 0,
      'source': 'YouTube', 
      'media-type': 'video',
      'playerName': 'uniqueIdTwo'

    }

    ]; 

And then this in in the view:

    <div ng-repeat="item in feed">
          <youtube-video video-url="item.url" player="item.playerName" player-vars="youtubeSettings"></youtube-video>
    </div>

While the correct value from 'item.url' correctly loads into the video, the player ends up being 'item.playerName' (literally) instead of the correct value 'uniqueIdTwo', for example. Using {{}} doesn't work inside the player attribute.

Any idea why this is happening? I need dynamic 'player' attributes, because I need them to be unique to each video so that I can play videos consecutively one after the other in separate players.

Thanks!

[Matt Brandly]

hey! maybe the docs don't explain this well, but the way the player attribute works is you hand it a variable, and internally, the directive assigns the player object to that variable.

what this means is the uniqueIdOne and uniqueIdTwo don't get used. those values just get overwritten by a player object.

with the code you've shared, you could reference individual players like $scope.feed[0].playerName and do things like $scope.feed[0].playerName.playVideo()

I need them to be unique to each video so that I can play videos consecutively one after the other in separate players.

you have unique references in this case, since you just look at other indices in feed like $scope.feed[1].playerName.

also, with events, you can find out when a video ends, and since a player object is handed to the event handler, you find out specifically which video ended and start the next one.

hope this all makes sense!

[Jake Allen]

Wow, thanks so much for the speedy and thorough response! I'm going to give this a try later on, but I think I should be able to manage it just fine. Thanks again!

[Mateo Quintero]

@jakey-wan-kenobi

How you solved the bug ?
I have the same bug. :(

[Jake Allen]

Hi @matteoquintero,

I did exactly what @brandly described, he was was spot on. Is it not working for you? Show us some code...

Also, I'm gonna close this issue but feel free to post your code

[Mateo Quintero]

The file html:

<youtube-video class="embed-responsive-item" video-url="{{notice.media}}"></youtube-video>

The file controller:

.controller('DashCtrl', function($scope, News) {
  News.all().then(function(response) { $scope.notices=response; });
})

The file services:

.factory('News', function($http) {
  var News = {
    all: function() {
      var promise = $http.post('http://localhost/contappta/dashboard/application/controller/app/news.php').then(function (response) {
        return response.data;
      });
      return promise;
    },
  return News;
})

And bug

[Jake Allen]

That's just a syntax error. Try removing the curly brackets, like this:

<youtube-video class="embed-responsive-item" video-url="notice.media"></youtube-video>

The directive already interpolates the video-url like a $scope value (think ng-if, not ng-src). Does that help?

Then if you define a 'player' attribute, like this...

    <youtube-video class="embed-responsive-item" video-url="notice.media" player="notice.myVideoPlayer"></youtube-video>

...you can access the player in your controller like this:

$scope.notice.media.myVideoPlayer

And you can do things like this to play the video:

    $scope.notice.media.myVideoPlayer.playVideo();

[Matt Brandly]

@jakey-wan-kenobi glad you got it working! and thanks for the extra tech support hahaha

[Jake Allen]

;)

Sent from my iPhone

On Feb 10, 2016, at 3:00 PM, Matthew Brandly [e-mail] wrote:

@jakey-wan-kenobi glad you got it working! and thanks for the extra tech support hahaha

—
Reply to this email directly or view it on GitHub.

[Mateo Quintero]

Thanks!!! is working @jakey-wan-kenobi