Include에있는 지시문의 AngularJS 범위

Question

부모 지시문의 부모에있는 변수를 기반으로 지시문을 올바르게 업데이트하려면 어떻게해야합니까?

저는 서비스 호출을 통해 채워 져야하는 데이터의 개별 그리드에 대한로드를 보여주는 데 사용하려는 애니메이션 지시문이 있습니다. 현재 페이지에 대한 기본 템플릿이 있고 페이지에 표시하려는 특정 "위젯"에 대한 ng-include가 있습니다. 위젯은 채워진 정보가있는 div를 표시하거나로드 지시문에 표시됩니다. 적어도 내가 할 수 있도록하려는 것입니다.

계속 진행하고있는 $ watch는 작동하지 않는 것 같습니다. 일부 로그 문을 넣었고 "test"가 가리키는 변수를 수동으로 변경했지만 아직 실행중인 것처럼 작동합니다. 결코 바뀌지 않았다.

//One approach to the directive 
myApp.directive('loading', function() { 
    return { 
     restrict: "E", 
     scope : { 
      test : '=' 
     }, 
     templateUrl: 'partials/loading-animation.html' 
    }; 
}); 

지시문을 포함하는 포함 용 html. loadVal은 부모 상위 컨트롤러의 범위에있는 변수입니다. loadVal은 서비스 호출에 따라 변경되고 올바르게 업데이트됩니다.

<div ng-show="!loadVal" class='address store'> 
    <span>{{address.storeName}}</span> 
    <span>{{address.address1}}</span> 
    <span>{{address.city}},{{address.state}} {{address.zip}}</span> 
</div> 
<loading test="loadVal" ng-show="test"></loading> 

현재 지시문 만있는 경우에도 여전히 표시되지 않습니다. ng-switch를 사용해 보았지만 경로 변경이 없기 때문에로드 지시문과 주소 정보가 모두 표시됩니다. 또한 true 또는 false (! loadVal 및 loadVal) 중 하나를 기반으로 표시했는데 문제는 html이 표시되지 않기 때문에 "! loadVal"이 무엇인지 알 수없는 것입니다. ng-show = "! loadVal"이 켜져 있습니다.

편집가 : Plnkr

주을 : 나는 그냥 잘 작동하고있어 같은데, 여기에 내가 달성하기 위해 노력했다 나타낸 plnkr이야 내가 부모의 부모를 참조 할 수 없습니다 발견 지시어 템플릿에서 ng-show (즉, ng-show = "loadVal")를 사용하여 범위를 지정하십시오. 그러나 새 변수를 만들고 범위를 양방향으로하고 해당 변수를 loadVal과 동일하게 설정하면 변경 내용이 선택됩니다.

Answer 1

우선 ng-show 지시문의 loading 지시문의 분리 범위에있는 test 속성에 액세스하려고 시도하는 것으로 보입니다. (<loading test="loadVal" ng-show="test"></loading>) 그게 효과가 없을거야. ng-show이 실제로 코드에서 바인딩하려고하는 것은 부모 범위에 $scope.test입니다. 지시어 범위 test 속성을 가시성에 사용하려면 템플릿에서 사용하십시오.

또한 현재 지시어에 $ watch를 사용할 필요가 없으며 범위 속성을 변경하는 데 거의 scope.$apply()을 사용할 필요가 거의 없습니다. AngularJS는 $apply 호출 내에서 대부분의 코드를 래핑합니다.

이 시도 :

myApp.directive('loading', function() { 
    return { 
     restrict: "E", 
     replace: true, 
     scope : { 
      test : '=' 
     }, 
     template: '<div ng-show="test"></div>' 
    }; 
}); 

난 그냥 데모 목적을 위해 인라인 템플릿으로 templateUrl를 교체했다.

보기의 loading 지시문을 <loading test="loadVal"></loading>으로 단순화 할 수 있습니다.