내 컨트롤러가 다른 것들

Question

나는이 컨트롤러 기능이 작업을 수행하기 전에 완료 될 때까지 내 지시를 기다려야합니다 :

$scope.keypadEnter = function() { 
    userService.isCodeValid($scope.code).then(function (result) 
    { 
     if (JSON.parse(result.data)) { 
      $scope.highlight("lime").then(function() {; 
       console.log("redirecting ..."); 
       $location.path('/clockin'); 
      }); 
     } 
     else 
     { 
      $scope.highlight("red"); 
     } 

     $scope.code = ""; 
    }); 
}; 

컨트롤러는 다음의 경우에 true를 반환하는 서비스 (userService) 함수 (isCodeValid)를 호출 지정된 코드는 유효하고, 그렇지 않으면 false입니다.

봐 밀접하게이 두 라인에서 :

angular.module('clockin').directive('grDisplay', function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attrs) { 
      $scope.highlight = function (color) { 
       $element.effect("highlight", { color: color }, 500); 
      } 
     } 
    }; 
}); 

나는이 두 줄을 싶습니다

$scope.highlight("lime"); 
$location.path('/clockin'); 

$의 scope.highlight은 JQuery와 (강조) 애니메이션을 트리거하는 지시 기능입니다 동기식, 강조 표시 애니메이션 ($scope.highlight(...)) 리디렉션되기 전에 볼 수 있습니다. ($location.path(...)).

어떻게하면됩니까?

업데이트 : 다음에

angular.module('clockin').directive('grDisplay', function ($q, $timeout) { 
    return { 
     restrict: 'A', 
     link: function ($scope, $element, $attrs) { 
      $scope.highlight = function (color) { 
       var deferred = $q.defer(); 
       $element.effect("highlight", { color: color }, 500) 
       $timeout(deferred.resolve(), 5000); 

       return deferred.promise; 

      } 
     } 
    }; 
}); 

그리고 내 컨트롤러 기능 : 나는 (I 5 초에 타임 아웃을 과장되게 한) 다음에 내 지시 코드를 변경 한

$scope.keypadEnter = function() { 
    userService.isCodeValid($scope.code).then(function (result) 
    { 
     if (JSON.parse(result.data)) { 
      $scope.highlight("lime").then(function() {; 
       console.log("redirecting ..."); 
       $location.path('/clockin'); 
      }); 
     } 
     else 
     { 
      $scope.highlight("red"); 
     } 

     $scope.code = ""; 
    }); 
}; 

실행중인 경우에도 동일한 결과가 나타납니다. 강조 표시는 볼 수 있지만 완료 할 시간이 없습니다. 나는 방향을 바꾼다.

그리고이 오류가 :

TypeError: Objet expected at Anonymous function 

(hxxp : // 로컬 호스트 : 18000/스크립트/angular.js : 14261 : 11) completeOutstandingRequest 에서 (hxxp : // 로컬 호스트 : 18000/스크립트/angle.js : 4387 : 7) 익명 함수 (hxxp : // localhost : 18000/Scripts/angular.js : 4688 : 7)

아이디어가 있으십니까?

Answer 1

$scope.highlight 함수 호출 내에서 지연을 사용할 수 있습니다. 이 함수는 지연을 반환 할 수 있으며 해결 된 경우 $location.path을 변경합니다.

이 물리적으로 하이라이트를보고 너무 빨리 발생하면, 당신은 또한의 결의에 $timeout를 추가 할 수있는 연기 :

$scope.highlight("lime").then(function() { 
    $location.path('/clockin'); 
}); 

Answer 2

:

function MyDirective($q, $timeout) { 
    controller : function ($scope, $element) { 

     $scope.highlight = function() { 
      var deferred = $q.defer(); 

      // do your highlight stuff 

      // Resolve the deferred a second later 
      $timeout(deferred.resolve, 1000); 

      return deferred.promise; 
     } 
    } 
); 

은 그럼 당신은 이런 식으로 함수를 호출 할

userService.isCodeValid ($ scope.code)가 반환하는 값을 간단히 볼 수 있습니다.

뭔가 같은 :

$scope.val = userService.isCodeValid($scope.code); 
$scope.$watch('val', function() { 
    if($scope.val === true){ 
     $scope.highlight("lime"); 
     $location.path('/clockin'); 
    } 
    else { 
     $scope.highlight("red"); 
    } 
}); 

주 나는 사람들의 JS 전문가와 많은 아니에요 이런 말을 할 수는 더러운 코드 :