범위가 분리된 지시어에 ng-show를 사용하는 방법

범위가 분리된 지시어에 ng-show를 사용하는 방법

제가 사용하는 지시문은 다음과 같습니다.

<dir model="data"></dir>

지시어에는 독립된 범위가 있습니다.

scope :{
  model:'='
}

이제 저는 사용하려고 합니다.ng-show내 페이지의 $scope의 다른 속성을 사용하는 지시에 대해 다음과 같이 설명합니다.

<dir ng-show="show" model="data"></dir>

하지만 이 지시가 그들을 찾으려 하고 있기 때문에 작동하지 않습니다.show고유한 범위로 속성을 지정합니다.

저는 지시서가 컨테이너가 그것을 숨기는 것을 선택할 수도 있다는 사실을 알기를 원하지 않습니다.

제가 찾은 해결책은 지시문을 a로 포장하는 것입니다.<div>적용합니다.ng-show그 요소에 관해서는, 하지만 나는 이것이 나에게 사용하도록 강요하는 추가적인 요소가 마음에 들지 않습니다.

<div ng-show="show" >
  <dir model="data"></dir>    
</div>

더 좋은 방법이 없을까요?

다음 플렁커 보기: http://plnkr.co/edit/Q3MkWfl5mHssUeh3zXiR?p=preview

업데이트: 이 답변은 1.2 이전의 Angular 릴리스에 적용됩니다.Angular 1.2에 대한 @lex82의 답변을 참조하십시오.

왜냐하면 너의dir지시문은 동일한 요소에 정의된 모든 지시문인 분리 범위를 만듭니다(dir이 경우)는 해당 격리 범위를 사용합니다.그래서.ng-show재산을 찾습니다show부모 범위가 아니라 격리 범위에 있습니다.

당신의dir지침은 진정한 독립 실행형/자체 reusable/contained 구성 요소이므로 분리 범위를 사용해야 합니다. 따라서 포장 솔루션이 가장 좋습니다(사용하는 것보다 낫습니다).$parent, IMO) 그러한 지시문은 일반적으로 동일한 요소에 대해 다른 지시문과 함께 사용되어서는 안 되기 때문입니다(또는 정확히 이런 종류의 문제가 발생합니다).

지침에 분리 범위가 필요하지 않으면 문제가 사라집니다.

Angular 1.2 이상으로 마이그레이션하는 것을 고려해 볼 수 있습니다.격리 범위는 이제 범위 속성이 있는 명령에만 노출됩니다.이것은 ng-show가 더 이상 지시에 영향을 받지 않는다는 것을 의미하며, 처음부터 하려고 했던 것과 똑같이 작성할 수 있습니다.

<dir ng-show="show" model="data"></dir>

@앵글-개발자들: 수고했어요, 여러분!

링크 기능에 다음을 추가하면 문제가 해결됩니다.구성요소 제작자에게는 추가적인 단계이지만 구성요소를 보다 직관적으로 사용할 수 있게 해줍니다.

function link($scope, $element, attr, ctrl) {

    if (attr.hasOwnProperty("ngShow")) {
        function ngShow() {
            if ($scope.ngShow === true) {
                $element.show();
            }
            else if($scope.ngShow === false) {
                $element.hide();
            }
        }
        $scope.$watch("ngShow", ngShow);
        setTimeout(ngShow, 0);
    }
    //... more in the link function
}

ngShow에 대한 스코프 바인딩도 설정해야 합니다.

scope: {
    ngShow: "="
}

간단히 사용$parent다음과 같은 상위 범위의 경우:

<dir ng-show="$parent.show" model="data"></dir>

부인

저는 이것이 당신의 질문에 대한 정확한 답변이라고 생각하지만, 미학적인 관점에서 완벽하지 않다는 것을 인정합니다.하지만 포장은.<div>별로 좋은 것도 아닙니다.다른 매개 변수가 격리 범위로 전달된 것을 보면 지시가 실제로 격리 범위를 가지고 있음을 알 수 있기 때문에 정당화할 수 있다고 생각합니다.한편, 저는 제가 애당초 $parent를 정기적으로 잊어버린다는 것을 인정하고 왜 그것이 작동하지 않는지 의문을 품어야 합니다.

추가 속성을 추가하는 것이 확실히 더 명확할 것입니다.is-visible="expression"삽입합니다.ng-show대내적으로하지만 당신은 질문에서 당신이 이 해결책을 피하려고 노력했다고 말했습니다.

업데이트: Angular 1.2 이상에서는 작동하지 않습니다.

언급URL : https://stackoverflow.com/questions/16747225/how-to-use-ng-show-on-a-directive-that-has-an-isolated-scope