Javascript 如何在没有控制器的情况下将$scope.$on添加到视图中

我在Angular应用程序中使用了一个插件，它可以触发

$rootScope.$broadcast（'signenbegin'）

。我想用

ng if

显示一个

预加载程序

，但我无权访问此控制器以添加

$scope.$on（'signinBegin'，function（）{…}）

。当事件在HTML视图中启动时，如何在没有控制器的情况下显示预加载程序

<div ng-if="preloader">
    <img src="../assets/img/preloader/material.gif" alt="preloader">
</div>
<div id="sign-form" class="panel panel-default">
    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">         
                <!--  ng-submit should be signin() -->
                <form ng-submit="signin()" role="form" autocomplete="off" class="form-horizontal">
                    <fieldset>                                      
                        <div  class="input-group">
                            <span class="input-group-addon"><i class="fa fa-user"></i></span>
                            <input ng-model="user.email" type="text" class="form-control" id="email" placeholder="Email" required>
                        </div>
                        <div class="spacing"></div>
                        <div  class="input-group">
                            <span class="input-group-addon"><i class="fa fa-key"></i></span>
                            <input ng-model="user.password" type="password" class="form-control" id="password" placeholder="Password">
                        </div>
                        <div class="spacing"></div>
                        <button type="submit" class="btn btn-success btn-sm  pull-right">Sign In</button>
                    </fieldset>
                </form>
                <a ui-sref="forget-password" class="grey">Forget Password?</a>
            </div>

        </div>

    </div>
</div>

我使用插件

---

谢谢

您可能可以使用指令。例如：

myApp.directive('signinBeginFoo', function() {
   return {
       scope: true,
       link: function($scope) {
           $scope.$on('signinBegin', function() {
               $scope.preloader = true;
           });
       }
   }
});

现在，修改您的DOM：

<signin-begin-foo>
    <div ng-if="preloader">
        <img src="../assets/img/preloader/material.gif" alt="preloader">
    </div>
</signin-begin-foo>

首先是如何添加此视图的？能否在此处添加代码？或者你能在这里发布代码吗？我添加了代码。我没有这个页面的控制器，你能按照你的要求创建plunker吗？或者你能解释清楚吗？我不能创建plunker，因为这段代码与我的后端相关，而且很复杂。我有这样的问题。我使用这个库登录。这个插件的作者写为

signinBegin

。根据文档，我不需要定义控制器。现在我想用这个事件来显示预加载程序。我想这很清楚。

<signin-begin-foo>
    <div ng-if="preloader">
        <img src="../assets/img/preloader/material.gif" alt="preloader">
    </div>
</signin-begin-foo>