如何添加$scope$打开以在没有控制器的情况下查看

How to add $scope.$on to view without controller

本文关键字：控制器 情况下 何添加 添加 scope      更新时间：2024-03-31

我在Angular应用程序中使用了一个插件，该插件会触发$rootScope.$broadcast('signinBegin')。我想显示带有ng-if的preloader，但我无权访问此控制器以添加$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>

和这个app.config

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

我使用ng AA插件。

感谢

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

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>
相关文章：