问
范围.$ on在指令内创建时不起作用

liu-zebing_284 发布于 2023-02-09 21:21
我已经为我的应用程序创建了一个指令,在下面的问题中提到了如何使用AngularJS或Javascript提供下载文件？指令代码如下所示
    appModule.directive('fileDownload', function ($compile) {
        var fd = {
            restrict: 'A',
            link: function (scope, iElement, iAttrs) {

                scope.$on("downloadFile", function (e, url) {
                    var iFrame = iElement.find("iframe");
                    if (!(iFrame && iFrame.length > 0)) {
                        iFrame = $("");
                        iElement.append(iFrame);
                    }
                    iFrame.attr("src", url);
                });
            }
        };
        return fd;
    });
</pre>

<p>这里使用范围.$ on,当我通过$ scope.$ emit或$ scope.$ broadcast调用此事件时,它不起作用.我的控制器代码如下所示</p>

<pre class="brush:bash;">    function reportsController($scope, $http) {
        var self = this;

        $scope.$broadcast("downloadFile", 'http://google.com');
        $scope.$emit("downloadFile", 'http://google.com');
    }
</pre>

<p>我的html文件如下</p>

<pre class="brush:bash;">    <div ng-controller="reportsController" id="repctrl">
        <a file-download></a>
    </div>
</pre>

<p>我在这做错了什么？</p>

<p>@Edit:在编译阶段添加了subscribe($ on),以避免在控制器中使用$ timeout.在这里你可以看一下这个例子</p>        <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8923551941185667"
                crossorigin="anonymous"></script>
        <ins class="adsbygoogle"
             style="display:block; text-align:center;"
             data-ad-layout="in-article"
             data-ad-format="fluid"
             data-ad-client="ca-pub-8923551941185667"
             data-ad-slot="9961241226"></ins>
        <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
    </div>

        <div class="q_answer_list">
        <div class="q_answer_list_top">1 个回答</div>
        <ul>
                        <li>
                <div class="an_content"><p>我认为你的控制器正在你的指令之前被初始化..所以<code>$on</code>开始监听之后<code>$emit</code>,<code>$broadcast</code>已经发生了.</p>

<p>看到这个plunker</p>

<p>打开控制台,您可以看到console.logs何时发生:</p>

<pre class="brush:bash;">controller init happened script.js:16
link happened script.js:7
$scope.test() happened script.js:21
scope.$on happened script.js:9
scope.$on happened 
</pre>

<p>如果<code>ng-view</code>在创建指令后使用或初始化控制器或执行emit/broadcast,它应该可以工作.</p></p>
        </div>
                <div class="an_info">
                    <div class="an_creat_info">2023-02-09 21:28  回答</div>
                    <div class="an_user_info"><img src="https://img.php1.cn/3cd4a/1e789/b64/79384371ecab812e.jpeg" width="20"/> &nbsp;&nbsp;您是漂亮女人807</div>
                </div>
            </li>
                    </ul>
    </div>
    
    <div class="q_answer">
        <div class="q_answer_top">撰写答案</div>
        <div class="q_answer_box">
            <form action="https://ask.php1.cn/?s=index/questionAnswer&id=627689" method="post">
                <div class="q_answer_txt">
                    <textarea id="editor1" name="editor1" >回答问题...</textarea>
                </div>
                <script>
                    var config = {
                        extraPlugins: 'codesnippet',
                        codeSnippet_theme: 'monokai_sublime',
                        height: 200
                    };

                    CKEDITOR.replace( 'editor1', config );
                </script>
                <div class="q_answer_bt">
                    <input type="submit" value="提交回答">
                </div>
            </form>
        </div>
    </div>


</div>

    <div class="ask_main_right">
    <div class="ask_add_tips">
        <div class="ask_add_title">今天，你开发时遇到什么问题呢？</div>
        <a href="https://ask.php1.cn/?s=index/add"><div class="ask_add_bt">立即提问</div></a>
    </div>

    <div class="ask_tags">
        <div class="ask_tags_title">热门标签</div>
        <div class="ask_tags_list">
            <ul>
                                <div style="clear:both"></div>
            </ul>
        </div>
    </div>


    
</div>    <div style="clear: both"></div>
</div>

<div style="clear: both"></div>
<div class="bottom">
    PHP1.CN | 中国最专业的PHP中文社区 | <a href="https://www.php1.cn/pngimg/" target="_blank"  title="PNG素材下载">PNG素材下载</a> |  <a href="https://devbox.cn/" target="_blank"  title="DevBox开发工具箱">DevBox开发工具箱</a> | <a href="https://www.json1.cn/" target="_blank"  title="json解析格式化">json解析格式化</a> |<a href="https://news.php1.cn/" title="PHP资讯">PHP资讯</a> | <a href="https://school.php1.cn/" title="PHP教程">PHP教程</a> | <a href="https://database.php1.cn/" title="数据库技术">数据库技术</a> | <a href="https://server.php1.cn/" title="服务器技术">服务器技术</a> | <a href="https://web.php1.cn/" title="前端技术">前端开发技术</a> | <a href="https://www.php1.cn/phpframework.html" title="PHP框架">PHP框架</a> | <a href="https://tools.php1.cn/">开发工具</a>  | <a href="https://www.json1.cn/tools/" title="在线工具">在线工具</a><BR />
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved   <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802041100" style="color:#444;"><img src="https://img.json1.cn/3cd4a/21981/c5a/4df0b47476da9030.png"/>京公网安备 11010802041100号</a>  |  <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备19059560号-4</a> | PHP1.CN 第一PHP社区  版权所有 <BR />
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'https://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

<script type="text/javascript" src="//js.users.51.la/21559097.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="/style/SyntaxHighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="/style/SyntaxHighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="/style/SyntaxHighlighter/styles/shThemeLiuQing.css"/>
<style>
    .syntaxhighlighter{
        width: 600px;
        padding-top:40px;padding-bottom:20px;
        border: 1px solid #333;
        background: url("/style/SyntaxHighlighter/top_bg.svg");
        background-size: 43px;
        background-repeat: no-repeat;
        margin-bottom: -7px;
        border-radius: 15px;
        background-position: 16px 12px;

    }
    .gutter{
        display: none;
    }
</style>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

</body>
</html>