$scope.player === undefined about angular-media-player

[colthreepv]

Hello nicholas, maybe you forgot to declare your app with mediaPlayer as dependency:

Like this
angular.module('app-name', ['mediaPlayer']);

[secretfader]

Nope, that's in there. The player works fine - I just can't retrieve the player object in my controller.

[colthreepv]

You are right, i remember a similar issue, time ago.. it's the #13
From what i can tell the problem is timing.

I'll explain further:
Angular.js executes Controller function before directive linking function (empyrical proof);
in such manner, console.log($scope.player); gets executed WAY before the directive gets processed creates such an object in your scope.
Such assignment can be seen there

I'm looking actively for a workaround to this, so any input would be welcome.

If you have to interact with the player you can use 2 approaches at the moment:

• create a function like $scope.printPlayer = function () { console.log($scope.player); }
• use $timeout like $timeout(function () { console.log($scope.player); });

This is indeed a serious issue and i would accept an heavy refactor if it can be a solution, but at the moment i don't know how.

Link to a fiddle showing the 2nd way to interact with player

[Martinspire]

If i have a ng-click event and run stuff on the $scope.player it doesn't recogize the player variable. So i can't do anything from my controllers to inflict the media player. Its not exposed in the scope at all. Though i can see player.currentTime being reflected in my html as it should. Its just not doing anything in my controller

[colthreepv]

@Martinspire I've updated the jsfiddle to show you how to interact with it.
Fiddle: http://jsfiddle.net/mrgamer/bv2ehfb1/7/

[secretfader]

Is this something you plan to resolve eventually? Because using $timeout in the controller seems like a nasty workaround. I'm not a Angular pro by any stretch, but it feels wrong.

[colthreepv]

I'm honestly not a pro aswell, but I haven't found any other directive that pollutes the scope where it gets created, angular-media-player does exactly that in order to be "controllable" from the controller. If you find any other libs that does that I would probably fix this.

The only issue, is that the directive pollutes the scope after the scope function gets executed, so if you use $timeout you can interact with it after it gets bound to the controller scope

EDIT: i found an interesting angular.js post of some time ago regarding this. This specific post seems interesting, altough writing a service could complicate things for users, that just want an easy way to access their directives (a variable inside the scope seems way more intuitive)

[secretfader]

You are calling $rootScope.apply() after setting up the player object, right? That fixed a problem like this in one of my apps.

[secretfader]

As outlined in that thread, I've also used broadcast() or emit() too. Both options have their merits, and I wouldn't be opposed to initializing based on events.

[colthreepv]

Nightly idea, you might setup scope watch:

angular.module('app').controller('YourController', function ($scope) {
  $scope.$watch('player', function (newValue, oldValue) {
    if (newValue === oldValue) return;
    // now newValue is the player, you should be able to interact with it.
    newValue.play();
  });
});

Less hack-ish than a $timeout (altough $timeout is simpler), simpler than events (events are not so nice because they are strings, so you cannot name 2 angular-media-player(s) with the same name)

[colthreepv]

On a second tought actually events are the same as a watch on the scope, since they are both string-based.

The only difference is a scope.$watch does not require a new release, and if somebody (or me) implements an event to say when the player is "ready", scope.$watch will still work as a charm!

So in my opinion this is the best approach for now, if you're satisfied you can closs the issue, or if you're not, keep it open, it will get closed when a ready event gets implemented!

[colthreepv]

I'm waiting for some feedback, i'll remove the bug tag and keep it open awhile so people having this issue access it more easily.

It could be nice to sum it up for new users in the README, but the gift of conciseness is needed...

[Martinspire]

Couldn't the resolve-function be used to get some data flowing? Or prepare the function.

I find it a bit anti-angular to need a console-log to access a value. I'm not good enough with directives yet to provide a solution, but i feel that this should be changed to a more natural way of using the library. Also i've gotten some issues where i couldn't access it from child controller or where events from broadcast weren't handled correctly.

[secretfader]

To be honest, I'm not so sure that the bulk of the project should exist as a directive. The deeper I dive into Angular, it seems like this kind of thing should (mostly) be encapsulated in a service.

To that end, I dropped angular-media-player in my project roughly a week ago, in favor of a service driven approach using soundmanager2. Granted, my implementation isn't near as polished (or as well tested), but it gets the job done, and I've yet to come across any weird bugs like this one.

[Martinspire]

Hmm, seems logical, but wouldn't you then built a directive around that implementation? Or how have you structured it now?