Angular - receiving info from controller inside directive

Question

I have a directive which is responsible to render audio and video items on a page:

myApp.directive('videoitem', function($compile){

return {
    replace: true,
    templateUrl: '/templates/directives/videoitem.html',
    scope: {
        videoChunkItem: "=",
        videostartedCallback: "&videostarted",
        videoendedCallback: "&videoended",

    },
    link: function($scope, $element, $attributes){

        var startVideo = function(){
            $element[0].load();
            $element[0].play();
            $scope.videostartedCallback();
        };

        $element.bind("ended", function(){
            $scope.videoendedCallback();
            $scope.$apply();
        });

        /**
         * Here I am using on click event to start the video 
         * but the real case is that the trigger for video playing should come from controller.
         * Any idea how to do it?
         */
        $element.on('click', function(){
            startVideo();
        });
    }
};

});

Is it possible from a route controller to send some event or something else to communicate from controller to directive to call startVideo method? The flow of communication is from route controller to directive ... When in a controller occure some event I want to invoke directive's startVideo method.

Answer 1

Without knowing your exact use-case, my approach would be to define a new scope property, e.g. play : "=" (to set it to stop when the video ends), and $observe attrs.play or $scope.$watch "play" it. In your template you bind it to a $scope variable that is triggered by the controller.

<video-item play="videoControls.play"></video-item>

Here's a plunker where you use two-way binding, note how you don't have to do anything:

http://plnkr.co/edit/3OI801KcvYVoySDvcm8i?p=preview

If you want to allow expressions, you have to observe the attribute to get the interpolated value:

http://plnkr.co/edit/gi6FSPPlN599CtDjKBOb?p=preview