AngularJS - 隐藏/显示指令输出基于表达式

Question

我想输出从自定义指令一些标记，但前提是该模型包含一些文本。

我几乎没有，但我只是不很清楚如何打开/关闭时的模式变化的模板，如果这是连这样做的最有效的方式。

下面是标记：

<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

Answer 1

如果我理解你想要做什么，最简单的方法是与ng-show。然后，你甚至都不需要$watch（或与此有关的链接功能）

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> ' 
    }; 
}); 

Updated fiddle