사용 컨트롤러 속성/방법

Question

나는 등 (나중에 설명 될 것이다 지침 포함) 다양한 입력이 있습니다

<input mask-value="ssn" validate="checkSsn"/> 
<input mask-value="pin" validate="checkPin"/> 

이러한 속성은 컨트롤러에있는을 :

app.controller("Ctrl", ['$scope', function ($scope) { 
    $scope.ssn = ""; 
    $scope.pin = ""; 

    $scope.checkSsn = function() { /* validate $scope.ssn */ }; 
    $scope.checkPin = function() { /* validate $scope.pin */ }; 
}]); 

마지막으로, maskValue 지시어 :

app.directive("maskValue", function() { 
    return function (scope, element, attrs) { 
     /* does some focus/blur magic and string replacement */ 
     scope[attrs.maskValue] = this.value; 
     scope[attrs.validate](); 
    }; 
}); 

이 작동하지만, 나에게 각도의 오용처럼 보인다. 대신 같이 고립 된 범위를 사용하는 것이 더 나을 :

scope: {validate: "&"} 

가 그럼 난 scope.validate() 대신 scope[attrs.validate]()를 사용할 수 있습니다. 그러나, 격리 된 범위와 나는 컨트롤러의 해당 값을 업데이트 할 수 없습니다. {maskValue: "="}을 사용하면 특정 값이 아닌 부모의 maskValue 속성을 업데이트하려고하기 때문에 작동하지 않습니다. 나는 {ssn: "="}을 사용하는 것이 효과적 일 것이라고 생각하지만 컨트롤러의 특정 속성을 업데이트해야한다. 지시어를 유연하게 만들 수있는 지시어 속성으로 설정해야한다. 분명히 $parent을 사용하는 것은 권장하지 않습니다.

격리 된 스코프 지시문 내에서 컨트롤러의 속성에 동적으로 액세스하려면 어떻게합니까?

• 예 작업 코드 : http://jsfiddle.net/MmyvX/
내가 (작동하지 않는) 달성하기 위해 노력하고 무엇을
• 시도 : http://jsfiddle.net/MmyvX/1/는

편집 : 내가 입력에 등 ng-model=ssn을 사용할 수 없습니다 mask-value의 포커스/흐림 이벤트 중에 입력의 실제 값이 변경되기 때문입니다. 예를 들어 *****####이 될 수도 있지만 실제 값인 #########을 어딘가에 저장해야합니다. 컨트롤러는 다른 이유로 나중에 사용할 것이므로 적절한 장소 인 것으로 보입니다.

Answer 1

<div ng-app=foo> 
    <div ng-controller=Ctrl> 
    {{ssn}} 
    <input mask-value="ssn" validate="checkSsn()"> 

app = angular.module("foo", []); 

app.controller("Ctrl", ['$scope', function ($scope) { 
    $scope.ssn = ""; 
    $scope.checkSsn = function() { console.log($scope.ssn); }; 
}]); 

app.directive("maskValue", function() { 
    return { 
     scope: { 
      validate: "&", 
      maskValue: "=" 
     }, 
     link: function (scope, element, attrs) { 
      element.bind("change", function() { 
       scope.maskValue = this.value; 
       scope.$apply(); 
       scope.validate(); 
      }); 
     }, 
    }; 
}); 

http://jsfiddle.net/bfDqy/

편집 :

그들이 내기라고 말하다. 어 당신 때문에 Anguular에서 일부 오류 처리 특수성의 $apply에 인수로 평가할 표현 통과 :

var value = this.value; 
scope.$apply(function() { 
    scope.maskValue = value; 
}); 

Answer 2

는 정말 죄송 해요하지만 왜 그냥 않는 : 그런

app = angular.module("foo", []); 

app.controller("Ctrl", ['$scope', function ($scope) { 
    $scope.ssn = ""; 
    $scope.validate = function() { console.log($scope.ssn); }; 
}]); 

app.directive("maskValue", function() { 
    return { 
     link: function (scope, element, attrs) { 
      element.bind("change", function() { 
       scope.validate(); 
      }); 
     }, 
    }; 
}); 

그리고 HTML :

<div ng-app=foo> 
    <div ng-controller=Ctrl> 
     <input ng-model="ssn" mask-value /> 
    </div> 
</div> 

Answer 3

난 당신이 이미 질문에 대한 답변을 가지고 알아,하지만 나는 그것이 언급 할 가치가 있다고 생각 몇 가지 유효성 검사를 수행하는 것처럼 보이기 때문에 Angular의 기본 제공 기능을 사용하여이를 수행하고 ng-model을 계속 사용할 수 있습니다.

app.directive("maskValue", function ($parse) { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ngModel) { 
     if (!ngModel) return; 
     var validator = $parse(attrs.validator)(scope); 

     ngModel.$render = function() { 
     var hasFocus = document.activeElement == element[0]; 
     if (ngModel.$valid || hasFocus) element.val(ngModel.$modelValue) 
     else element.val('#######'); 
     }; 

     element.bind('blur', function() { 
     ngModel.$setValidity('maskValue', validator(this.value)) 
     ngModel.$render(); 
     }); 

     element.bind('focus', function() { 
     ngModel.$render(); 
     }); 
    } 
    }; 
}); 

이 지시어는 뷰가 업데이트되는 방식을 제어 할 ng-model과 함께 작업하기 위해 NgModelController를 사용하는 예를 들면 다음과 같습니다이다. 이 고안된 예제에서 요소가 포커스를 잃고 유효성 검사 함수가 false를 반환하면 ########를 렌더링합니다. 그러나 컨트롤이 다시 집중되면 실제 값을 렌더링하여 사용자가 변경할 수 있습니다. 요소 상태 (유효 또는 무효)에 따라보기가 변경되는 동안 컨트롤에 바인딩 된 범위의 속성은 그대로 유지됩니다. 작동 예제 here을 볼 수 있습니다.