來自控制器的呼叫指令

我有一個登錄功能，我希望在點擊時加載一個微調框，直到事件結束，然後隱藏加載微調框。我正在構建一個離子應用程序。來自控制器的呼叫指令

目前我的代碼是這樣的

這是結合到點擊登錄

$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是真的。

任何幫助表示讚賞？

感謝

來源

2015-06-22 Kingsley Simon

將loginData移動到控制器。這樣你就可以在你的應用程序的所有模塊上共享它 –

loginData已經在控制器@ TechMa9iac –

對不起，我的意思是服務。將loginData移動到服務中。 –

採用這種結構我只有一個指令，我可以在我的，我要執行ionicLoading功能各種HTML調用。

在我的指令

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>

來源

2015-06-23 10:11:59

來自控制器的呼叫指令

回答

相關問題