javascript - 如何添加 $scope.$on 以在没有 Controller 的情况下查看

Question

我在 Angular 应用程序中使用一个插件来触发 $rootScope.$broadcast('signinBegin')。我想用 ng-if 显示一个 preloader 但我无权访问此 Controller 来添加 $scope.$on('signinBegin',function (){...})。当事件在 HTML View 中启动时，如何在没有 Controller 的情况下显示预加载器？

<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>

和这个app.config

app.config(function($stateProvider,$urlRouterProvider,$locationProvider,$authProvider) {
    $authProvider.signinState = 'login';
    $authProvider.signinRoute = '/login';

我使用ng-AA插件。

谢谢

Answer 1

您也许可以使用指令。例如:

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>