我想从自定义指令输出一些标记,但仅当模型包含一些文本时才会输出。
我差不多了,但是我不太确定如何在模型改变时打开/关闭模板,如果这是最有效的方式。
这是标记:
<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
答案 0 :(得分:8)
如果我理解你想做什么,最简单的方法就是使用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> '
};
});