在mdDialog或ngDialog

Question

一直试图找到一种方法来做到这一点，并认为我已经找到了问题，但不知道可以做些什么。

基本上，我想要一个弹出窗口来显示ala mdDialog或ngDialog，基本上是一个带有大量位的漂亮窗口。但问题是，如果我这样做，mdDialog或ngDialog作为模板加载的任何东西都只能是HTML。它不允许我在内部启动reveal.js。

我尝试过使用角度材质和角度对话框。两者都有同样的问题。

首先，我们非常简单的自包含揭示了html。

<md-dialog aria-label="How to consume"  ng-cloak>
    <link rel="stylesheet" href="/bower_components/reveal.js/css/reveal.css">
    <div>
        <div style="background-color: #00B700; height: 400px; width: 600px" class="reveal" >

            <div class="slides">
                <section><H1>This is one</H1></section>
                <section><H1>This is two</H1></section>
                <section><H1>This is three</H1></section>
                <section><H1>This is four</H1></section>
            </div>
        </div>
    </div>
    <script src="/bower_components/reveal.js/lib/js/head.min.js"></script>
    <script src="/bower_components/reveal.js/js/reveal.js"></script>
    <script>
        console.log("Trying to load now")
        Reveal.initialize({
            controls: true,
            progress: true,
            history: true,
            center: true,


            transition: 'slide', // none/fade/slide/convex/concave/zoom

            // Optional reveal.js plugins
            dependencies: [
                {
                    src: '/bower_components/reveal.js/lib/js/classList.js', condition: function () {
                    return !document.body.classList;
                }
                },
                {
                    src: '/bower_components/reveal.js/plugin/markdown/marked.js', condition: function () {
                    return !!document.querySelector('[data-markdown]');
                }
                },
                {
                    src: '/bower_components/reveal.js/plugin/markdown/markdown.js', condition: function () {
                    return !!document.querySelector('[data-markdown]');
                }
                },
                {
                    src: '/bower_components/reveal.js/plugin/highlight/highlight.js',
                    async: true,
                    condition: function () {
                        return !!document.querySelector('pre code');
                    },
                    callback: function () {
                        hljs.initHighlightingOnLoad();
                    }
                },
                {src: '/bower_components/reveal.js/plugin/zoom-js/zoom.js', async: true},
                {src: '/bower_components/reveal.js/plugin/notes/notes.js', async: true}
            ]
        });
        Reveal.addEventListener('ready', function (event) {
            console.log("I have now entered " + event.currentSlide)
            // event.currentSlide, event.indexh, event.indexv
        });
    </script>
</md-dialog>

如果你在浏览器中打开它（并且已经在bower_component下安装了显示），那么它可以正常工作。

如果你在mdDialog或ndDialog中打开它没有任何反应（它永远不会触发         } else if（type ===＆＃39; ngDialog＆＃39;）{             console.log（＆＃34;尝试打开ngDialog＆＃34;）             ngDialog.open（{template：＆＃39; / modals / consumer＆＃39;，controller：＆＃39; revealController＆＃39;}）;

    } else if ( type === 'mdDialog') {
        $mdDialog.show({
                controller: 'revealController',
                templateUrl: '/modals/consumer',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose: true,
                fullscreen: useFullScreen
            })
            .then(function (answer) {
                console.log('You said the information was "' + answer + '".');
                if(answer === 'login'){
                    $scope.external = false
                    $location.url('/int/index');
                }
            }

我也试过通过控制器来做，所以使用控制器的html如下：

ngDialog.open({ template: '/modals/consumer', controller: 'displayRevealController'});

试图让一个好的控制器调用揭示： 控制器：

app.controller('displayRevealController', function($scope, $http, $mdDialog){
    console.log("I am so initialising")
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,


        transition: 'slide', // none/fade/slide/convex/concave/zoom

        // Optional reveal.js plugins
        dependencies: [
            {
                src: '/bower_components/reveal.js/lib/js/classList.js', condition: function () {
                return !document.body.classList;
            }
            },
            {
                src: '/bower_components/reveal.js/plugin/markdown/marked.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            }
            },
            {
                src: '/bower_components/reveal.js/plugin/markdown/markdown.js', condition: function () {
                return !!document.querySelector('[data-markdown]');
            }
            },
            {
                src: '/bower_components/reveal.js/plugin/highlight/highlight.js',
                async: true,
                condition: function () {
                    return !!document.querySelector('pre code');
                },
                callback: function () {
                    hljs.initHighlightingOnLoad();
                }
            },
            {src: '/bower_components/reveal.js/plugin/zoom-js/zoom.js', async: true},
            {src: '/bower_components/reveal.js/plugin/notes/notes.js', async: true}
        ]
    });
    Reveal.addEventListener('ready', function (event) {
        console.log("I have now entered " + event.currentSlide)
        // event.currentSlide, event.indexh, event.indexv
    });


});

但后来我收到一条错误消息，表明它无法找到DOM

  

TypeError：无法读取属性＆＃39; classList＆＃39;为null