AngularJS - 使用Directive调用Javascript函数

时间:2016-08-04 10:13:29

标签: javascript angularjs angularjs-directive vlc

点击视频网址时,我使用以下指令附加html并调用VLC对象

myApp.directive('vlcObject', function ($compile, $rootScope,$timeout) {
    var linker = function (scope, element, attrs) {
        $timeout(function () {
            var vlcPlayerTemplate =
                '<object id="vlc" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" class="vlc" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="100%" height="100%">' +
                '    <param name="Src" value="SomeUrl"></param>' +
                '    <param name="autoplay" value="true" ></param>' +
                '    <param name="toolbar" value="false"></param>' +
                '    <embed type="application/x-vlc-plugin" name="vlcfirefox" autoplay="yes" toolbar="false" width="100%" height="100%" target="SomeUrl"></embed>' +
            '</object>';
            element.html(vlcPlayerTemplate);
            $compile(element.contents())(scope);
        });        
    };
    return {
        restrict: "E",
        replace: true,
        link: linker
    };
});

通过服务调用指令

this.startVLCPlayerAt = function (pictureboxIndex) {
    angular.element(
        document.querySelector('#StreamingArea' + pictureboxIndex)
    ).append($compile("<vlc-object></vlc-object>")($rootScope));
};`

现在我想要包含/调用JavaScript函数以及指令,所以当点击url时,会发生两件事

  1. 1)附加VLC对象HTML
  2. 2)调用以下JS功能并创建VLC播放列表并执行 必要的操作
  3. JS功能

    function getVLC(name)
    {
        if( window.document[name] )
        {
            return window.document[name];
        }
        if( navigator.appName.indexOf("Microsoft Internet") == -1 )
        {
            if( document.embeds && document.embeds[name] )
                return document.embeds[name];
        }
        else
        {
            return document.getElementById(name);
        }
    }
    
    function registerVLCEvent(event, handler)
    {
        var vlc = getVLC("vlc");
    
        if( vlc )
        {
            if( vlc.attachEvent )
            {
                // Microsoft
                vlc.attachEvent(event, handler);
            }
            else if( vlc.addEventListener )
            {
                // Mozilla: DOM level 2
                vlc.addEventListener(event, handler, false);
            }
        }
    }
    
    function unregisterVLCEvent(event, handler)
    {
        var vlc = getVLC("vlc");
    
        if( vlc )
        {
            if( vlc.detachEvent )
            {
                // Microsoft
                vlc.detachEvent(event, handler);
            }
            else if( vlc.removeEventListener )
            {
                // Mozilla: DOM level 2
                vlc.removeEventListener(event, handler, false);
            }
        }
    }
    
    function doGo(targetURL)
    {
        var vlc = getVLC("vlc");
    
        if( vlc )
        {
            vlc.playlist.items.clear();
            var options = [":rtsp-tcp"];
            var itemId = vlc.playlist.add(targetURL,"",options);
            if( itemId != -1 )
            {
                // play MRL
                vlc.playlist.playItem(itemId);
            }
            else
            {
                alert("cannot play at the moment !");
            }
        }
    }
    

    随后,当用户点击播放/暂停按钮时,我正在使用以下功能执行相同的操作

    <input type="button" id="PlayOrPause" style="width:60px" value="Play" onClick='doPlayOrPause();'>
    <input type="button" value="Stop" onClick='doStop();'>
    
    function doPlayOrPause()
        {
            var vlc = getVLC("vlc");
            if( vlc )
            {
                if( vlc.playlist.isPlaying )
                    vlc.playlist.togglePause();
                else
                    vlc.playlist.play();
            }
        }
    
        function doStop()
        {
            var vlc = getVLC("vlc");
            if( vlc )
                vlc.playlist.stop();
        }
    

    如何使用指令调用上述JS函数?

0 个答案:

没有答案