2013-08-12 2 views
2

가 Plunker 라이브를 시도하십시오 - http://plnkr.co/edit/js7WOhjgKwUeElrdNwv0?p=preview 나는이 문제를 해결하십시오 작업 할 수있는 방법각도 지시어는 다른 지시를 "중단"(NG-필요 NG 장애인)

? Plunker와 아래의 예제와는 달리, 내가 작업하고있는 지시어는 고립 된 범위를 필요로한다. (적어도 현재의 구현은 하나를 사용하고 나는 그것을 다시 작성하지 않을 것이다.)

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script data-require="[email protected]*" data-semver="1.1.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js"></script> 

    <script> 
     var app = angular.module("MyApp",[]); 
     app.directive("myDirective", function(){ 
     return { 
      //scope:{}, 
      link: function(){} 
     }; 
     }); 
    </script> 

    <style> 
     .ng-invalid{ 
     border: 1px solid red; 
     } 
    </style> 
    </head> 

    <body ng-app="MyApp"> 
    <h1>My Directive</h1> 
    <p>Test the checkbox below then uncomment //scope:{} and try again.</p> 
    <input type="checkbox" ng-model="isActive" /> 
    <input type="text" ng-model="foo" 
     my-directive 
     ng-disabled="!isActive" 
     ng-required="isActive" /> 
    </body> 

</html> 

안부, 한스

답변

7

문제는 범위 전체 DOM 요소 (즉,이 경우 <input>)에 적용되며 my-directive 다음 ng-disabled 적용되는 분리 영역을 생성된다는 것이다 및 ng-required. 격리 범위는 원래 범위를 상속하지 않으므로 isActive이 범위 내에 표시되지 않습니다.

명시 적으로 분리 범위의 특성으로 제공 한 다음 ng-requiredng-disabled의 특성 로컬 버전을 참조하여 해당 범위 속성을 격리 범위에 매핑 할 수 있습니다. 예를 들어, 지시자 정의 :

scope: { 
    myActive: '=' 
} 

'='는 로컬 이름 myActive과, 그 소자의 특성에 my-active 주어진 식에 결합하는 2 방향을 설정한다. <input> 태그

:

my-directive my-active="isActive" ng-required="myActive" ng-disabled="!myActive" 

my-active="isActive" 관계 isActive 독립적 표시 범위에 myActive 상위 범위이다.

나는이를 증명하는 updated your plunker입니다.

+0

감사합니다. Aron. 귀하의 답변은 작동 할뿐만 아니라 지시가 더 잘 적용되는 방법을 이해하는 데 도움이되었습니다. 고맙습니다. – hcvst

관련 문제