지시어 내에서 랜덤 ng-show

Question

나는 이것을 알기 위해 볼 수 없다 ... 나는 바보 같은 짓을하는 경우에 너무 미안하다.

지시어의 일부를 ng-show를 사용하여 무작위로 표시하려고합니다.

HTML :

<div ng-controller="MyCtrl"> 
    <div ng-repeat="color in colors"> 
     <my-directive color="color"></my-directive> 
    </div> 
</div> 

컨트롤러 :

function MyCtrl($scope) { 
    $scope.colors = [ 
     {color: "red", stuff: "1"}, 
     {color: "blue", stuff: "2"}, 
     {color: "yellow", stuff: "3"} 
    ]; 
} 

지침 :

myApp.directive('myDirective', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
      color: '=', 
      showText: '@' 
     }, 
     template: 'test <p ng-show="showText">{{color.color}} {{color.stuff}}</p>', 
     controller: function ($scope, $element) { 
      $scope.showText = Math.random() < 0.5; 
     } 
    } 
}); 

<p>...</p> 보여줍니다하지, 왜? 당신이 (@) 텍스트 범위 속성 showText 구속력을 가지고 있기 때문에입니다

http://jsfiddle.net/oxr4c9ub/2/

Answer 1

. 지시어가 렌더링되면 컨트롤러를 평가하고 격리 된 범위 객체에 속성 값을 설정하지만 이후에 텍스트 바인딩을 평가하고 값이 바인딩되지 않은 경우에도 범위 속성 showText을 덮어 씁니다. 그래서 기본적으로 당신이 설정 한 무작위 부울은 @ 바운드 프로퍼티 (undefined/null)에 의해 덮어 쓰여지고 있습니다. 이것은 거짓 일 때 항상 p 태그를 숨길 것입니다.

을 사용하여 속성 값 설정을 다음 다이제스트주기로 연기 할 필요가 없으면 지시문 설정에서 showText: '@'을 제거하면됩니다. 나는 지시가 소비자에 의해 제어 될 수 있도록 showText`가 결합되고, 그래서 난 여전히 그것을두고 적용하기 전에 값의 존재 체크 표시를합니다`생각

Fiddle