Angular - 从控制器内部指令接收信息

时间:2013-08-03 09:12:43

标签: angularjs communication directive

我有一个指令,负责在页面上呈现音频和视频项目:

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();
        });
    }
};

});

是否可以从路由控制器发送一些事件或其他东西从控制器到指令通信以调用startVideo方法? 通信流程是从路由控制器到指令......当在控制器中发生某些事件时,我想调用指令的startVideo方法。

1 个答案:

答案 0 :(得分: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