CODEWITHSUNDEEP
angularjsangularjs-directive
Rob Allsopp
Rob Allsopp

Reputation: 3518

Directive "&" expression not working

I have made two directives that embed a swf object onto the page for playing and recording videos. There is a global function each swf uses to signal player events. The code for the player looks like

js:

scope: {
    onVideoPlay:  "&"
},
link: function(scope, element, attrs) {

    window.PlayerFuncs = {
        onPlay: function() {
            scope.onVideoPlay();
        }
    }

}

html:

<my-video-directive on-video-play="parentFunc()"></my-video-directive>

The recorder code is nearly identical with the only difference being the window.PlayerFuncs is just called window.RecorderFuncs, the event funcs are onVideoRecord, etc.

As you can see, the flash player calls PlayerFuncs.onPlay() when it is playing, and the directive passes this info on to the parent controller via the isolate scope onVideoPlay expression. This system works perfectly with the recorder, but not in the player. I have pulled the scope.onVideoPlay() line out of the PlayerFuncs object to test my syntax, and it works perfectly OUTSIDE that object, but as soon as I put it in there it seems not to bind to the parentFunc() expression. Console logging scope.onVideoPlay shows that it is still an angular wrapper for something, but apparently that something is not parentFunc(). Keep in mind this EXACT method works flawlessly in the recorder directive. What could be going on here?

I even tried this:

link: function(scope, element, attrs) {

    scope.doStuff = function() {
        scope.onVideoPlay();
    };

    scope.doStuff();

    window.PlayerFuncs = {
        onPlay: function() {
            scope.doStuff();
        }
    }

}

The call to doStuff() inside the window.PlayerFuncs doesn't work, but the call outside does!

Upvotes: 0

Views: 65

Answers (1)

ryeballar
ryeballar

Reputation: 30098

Try adding scope.$apply().

link: function(scope, element, attrs) {

    window.PlayerFuncs = {
        onPlay: function() {
            scope.onVideoPlay();
            scope.$apply();
        }
    }

}

Upvotes: 1

Related Questions