来自控制器的调用指令

Question

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

目前我的代码是这样的

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

$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');    
    }
  };

本着在AngularJS中模块化代码的精神，我希望ionicLoading.show事件完成相当多的单击事件，并在完成处理后将其隐藏。我觉得最好的方法是通过指令，但到目前为止，我对如何实现这一点有点模糊。

http://plnkr.co/edit/pi71uQunHSYMwONqlPTa?p=info

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

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

我的主要问题是，只有在loginData.$valid为true时才能触发ionicLoading.show。

有什么需要帮忙的吗？

谢谢

Answer 1

在这种结构中，我只有一个指令可以在我的各种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;
                }

          }

        });
      }
    }
    ])

在我的许多将使用指令函数的控制器作用域之一中

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

      AuthenticationService.login(loginData);    
  };

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

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