사용자 지정 바꾸기 지시문에서 ng-show를 사용하면 표시되거나 숨겨지지 않습니다.

Question

ng-show (또는 ng-hide) 명령을 사용자 정의 지시문에서 작동시키는 데 문제가 있습니다. 그것은 정상적인 HTML 요소에 잘 작동합니다.

<div ng-app="appMod"> 
    <div ng-controller="Ctrl3"> 
     <button>First</button> 
     <button ng-hide="NoSecond">Second</button> 

     <mybutton ng-hide="NoSecond" label="My button"/> 
    </div> 
</div> 

및 JS :

나는 문제를 도시하는 매우 간단한 예를 만든

function Ctrl3($scope) { 
    $scope.NoSecond = true; 
}; 

var appmod = angular.module('appMod', []); 

appmod.directive("mybutton", function() { 
    return { 
     restrict: "E", 
     template: "<div style='border: 1px solid black;'><button>{{label}}</button></div>", 
     scope: {label:'@'} 
    }; 
}); 

최종 결과는 '제'는 HTML 버튼 숨겨져 있지만, '된다는 것이다 mybutton '은 그렇지 않습니다. http://jsfiddle.net/fotoguy42/4j7td/2/는

는

어떻게 내 위젯에 NG-숨기기/표시 작업을 할 수 ? 당신이 지침에 변수 noSecond을 통과해야하고, 새 범위에 포함 당신이 당신의 지시에 새 범위를 만드는 때문에

Answer 1

좋아, 그래서 이것은 실제로 대부분 Why ng-hide doesn't work with custom directives?

의 중복입니다.

JS : -

또한 당신은 정말 당신의 자바 스크립트에 대한 낙타 표기법을 사용한다

function Ctrl3($scope) { 
    $scope.noSecond = true; 
}; 

var appmod = angular.module('appMod', []); 

appmod.directive("mybutton", function() { 
    return { 
     restrict: "E", 
     template: "<div style='border: 1px solid black;'><button>{{label}}</button></div>", 
     scope: {label:'@', noSecond: '='} 
    }; 
}); 

HTML :

<div ng-app="appMod"> 
    <div ng-controller="Ctrl3"> 
     <button>First</button> 
     <button ng-hide="noSecond">Second</button> 

     <mybutton ng-hide="noSecond" label="My button" no-second="noSecond"/> 
    </div> 
</div>  

이 각도 1.2.1 비록에서 변경된 것을 나타 않는다 이 문제에 책임이있는 마이그레이션 가이드의 변경 사항을 찾지 못하는 것 같습니다 ...

https://docs.angularjs.org/guide/migration