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

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

感谢任何帮助？

谢谢

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>

来自控制器的call指令

1 个答案: