AngularJS - 표현식을 기반으로 지시문 출력 숨기기/표시

사용자 지정 지시문에서 일부 출력물을 출력하려고하지만 모델에 텍스트가있는 경우에만 출력합니다.AngularJS - 표현식을 기반으로 지시문 출력 숨기기/표시

내가 거의 다 해요,하지만 난/오프 때 모델 변경에 대한 템플릿을 설정하는 방법 단지 아주 확실하지 않다,이도 그 일을 가장 효율적인 방법입니다 경우.

<div data-ng-controller="test"> 
<div class="box"> 
    <input type="text" id="search" maxlength="75" data-ng-model="keywords" /> 
</div> 
<searched data-ng-model="keywords"></searched> 
</div>

JS : 여기

마크 업입니다

var app = angular.module('myApp', []); 

app.directive('searched', function(){ 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      keywords: '=ngModel' 
     }, 
     template: '<span><span class="field">You searched for:</span> {{ keywords }}</span> ', 
     link: function(scope, element, attrs) { 
      scope.$watch('keywords', function(newVal, oldVal){ 
       if(newVal === null) { 
        // Output nothing! 
       } else { 
        // Output Template as normal. 
       } 
      }, true); 

     } 
    }; 
}); 

app.controller("test", ['$scope', function($scope) { 
    $scope.keywords = null; 
}]);

그리고 예를 들어 JSFiddle

출처

2013-03-14 Steve Holland

나는 당신이 원하는 것을 이해하고있어 경우, 가장 쉬운 방법은 것 ng-show. 그럼 당신도 $watch (또는 그 문제에 대한 링크 기능)

최고의

Updated fiddle

출처

2013-03-14 18:37:04 dnc253

app.directive('searched', function(){ return { restrict: 'E', replace: true, scope: { keywords: '=ngModel' }, template: '<span ng-show="keywords.length > 0"><span class="field">You searched for:</span> {{ keywords }}</span> ' }; });

, 덕분에 그것에 대해 많이 필요하지 않습니다. 나는 그것이 복잡하다는 것을 알고 있었다. :) –

리플렉션에서 이것에 사용할 가치가있는 지침이 있습니까? 제가 실제로하고 싶었던 것은 정확히 템플릿에있는 것입니다. 실제 마크 업에서 템플릿에있는 것을 사용해야합니까? 나는 마크 업에서 그것을 시도했고 정확히 내가 원하는 것을 수행한다. 그래서 지시어를 과도하게 사용하고 있는가? –

다른 곳에서 같은 마크 업을 다시 사용할 필요가 없다면, 그 지시어는 아마도 과잉 공격 일 것입니다. 이 지시문은 동일한 마크 업을 여러 곳에서 반복하지 않으려 고 할 때 유용합니다. – dnc253

AngularJS - 표현식을 기반으로 지시문 출력 숨기기/표시

답변

관련 문제