Angular.js

Question

제목이 명확하지 않은 경우 죄송합니다, 여기에 내가 할 노력하고있어입니다 :

을 나는 여러 가입 양식 및 모든 하나가 암호 필드가 있습니다. 이제 암호에 몇 가지 요구 사항을 설정하려고합니다. 내가 이상 5

입니다 암호를 얻으려면 내가 가진 :

<form name="myForm"> 

    <!-- some elements --> 

    <input type="password" required ng-model="user.password" name="password" ng-minlength="5"> 

과 오른쪽 그 후 :

내가 지시문에이 오류 메시지가 리팩토링 것이라고 생각

<div ng-show="myForm.password.$error.minlength">  
    Password is too short.  
</div> 

<!-- some other elements --> 

</form> 

, 유일한 문제는 양식의 이름을 지시문에 올바르게 전달할 수 없다는 것입니다.

myApp.directive('passwordLengthError', [function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template:'<div ng-show="{{form}}.password.$error.minlength">Password is too short.</div>', 
     scope: { 
      form: '@' 
     } 
    }; 
}]); 

내가 같이 호출 :

이 지침은 다음과 같습니다

<div> 
    <password-length-error form="myForm"/> 
</div> 

내가 크롬의 웹 관리자에서 확인하면 내가 매개 변수가 있음을 볼 수, 나는

참조

<div ng-show="myForm.password.$error.minlength"> 

그러나 실제로 작동하지 않습니다. 암호가 5보다 짧으면 메시지 팝업이 표시되지 않습니다. 문자.

이 방법을 만들 수 있습니까, 아니면 불가능합니까? 미리 감사드립니다.

Answer 1

격리 범위에있는 @은 각도 표현을 평가하려고합니다. 문자열을 전달하는 것만으로 범위 변수를 격리 범위 또는 특성 평가없이 직접 지시문의 특성 값으로 설정할 수 있습니다.

그래서 :

scope.form = attrs.form; 

그리고 전체 지침은 다음과 같습니다

app.directive('passwordLengthError', [function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template:'<div ng-show="{{form}}.password.$error.minlength">Password is too short.</div>', 
     link: function(scope, element, attrs){ 
      scope.form = attrs.form // the attribute is a string, so, YAY 
     } 
    }; 
}]); 

YOUR DEMO