Javascript 来自控制器的调用指令

我有一个登录函数，我希望在单击时加载微调器，直到事件完成，然后隐藏加载微调器。我正在构建一个离子应用程序

目前我的代码是这样的

这是绑定到单击登录的作用域函数

$scope.doLogin = function(loginData) {
    console.log("in doLogin")
    $scope.submitted = true;

    if (loginData.$valid) {
      $ionicLoading.show({
        //make the template a directive
        template: '<ion-spinner class="spinner-energized" icon="spiral"></ion-spinner>',
        hideOnStateChange: true,
        duration: 2000
      });
      $location.url('/about');    
    }
  };

$scope.doLogin=函数（loginda）{
console.log（“在doLogin中”）
$scope.submitted=true；
如果（登录数据$valid）{
$ionicLoading.show({
//使模板成为指令
模板：“”，
hideOnStateChange：没错，
持续时间：2000年
});
$location.url（'/about'）；
}
};

本着在AngularJS中模块化代码的精神，我有很多单击事件，我希望ionicLoading.show事件能够完成，在处理完成后，它会隐藏起来。我觉得最好的办法是通过指令，但到目前为止，我有点模糊，我将如何使它发生

我想把它转换成一个指令，这样我就可以在我的几个单击按钮函数的代码中调用它

$ionicLoading.show({
          //make the template a directive
          template: '<ion-spinner class="spinner-energized" icon="spiral"></ion-spinner>',
          hideOnStateChange: true,
          duration: 2000
        });

$ionicLoading.show({
//使模板成为指令
模板：“”，
hideOnStateChange：没错，
持续时间：2000年
});

我的主要问题是，

ionicLoading.show

只能在

loginda.$valid

为true时触发

谢谢你的帮助

---

感谢有了这个结构，我只有一个指令可以在各种html中调用，我想执行ionicLoading函数

在我的指令中

angular.module('my.directives', [])
    .directive('mainDirective',['$ionicLoading', function($ionicLoading) {
      return function(scope, element, attrs) {
        element.bind("click", function() {
          console.log("directives")
          var a = scope.$apply(attrs.mainDirective)
          console.log(a)
          if(a ===true){
            console.log("inside inside")
                $ionicLoading.show({
                template: '<ion-spinner class="spinner-energized" icon="spiral"></ion-spinner>',
                hideOnStateChange: true,
                duration: 2000
            });
                switch (attrs.mainDirective) {
                    case "loginData.$valid":
                        scope.$apply("doLogin(loginData)")
                        break;
                    case "regForm.$valid":
                        scope.$apply("submitRegForm(regForm)")
                        break;
                    case "newData.$valid":
                        scope.$apply("createLoanApplication(newData)")
                        break;
                    case "pswdChange.$valid":
                        scope.$apply("submitPswdChange(pswdChange)")
                        break;
                    case "feedback.$valid":
                        scope.$apply('submitFeedback(feedback)')
                        break;
                }

          }

        });
      }
    }
    ])

在许多需要该指令的html页面中的一个页面中

<div>
  <button main-directive = "loginData.$valid" class="button button-block button-positive" type="submit">Log in</button>
</div>

登录

将登录数据移动到控制器。这样，您就可以在apploginData的所有模块中共享它。Data已经在控制器@techma9iac中。对不起，我是说服务。将loginData移动到服务中。nope@TechMa9iac我认为这样做效率很低。我已经解决了我的问题。你可以使用http拦截器并添加一个控件，这样它只能在loginData时工作。$valid为true

<div>
  <button main-directive = "loginData.$valid" class="button button-block button-positive" type="submit">Log in</button>
</div>