0

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.

4

1 回答 1

0

在不知道您的确切用例的情况下,我的方法是定义一个新的范围属性,例如play : "="(将其设置为在视频结束时停止),$observe attrs.play或者$scope.$watch "play"它。在您的模板中,您将其绑定到由控制器触发的 $scope 变量。

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

这是一个使用双向绑定的 plunker,请注意您无需执行任何操作:

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

如果要允许表达式,则必须观察属性以获取插值:

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

于 2013-08-03T11:36:36.670 回答