2

カスタムディレクティブからマークアップを出力したいのですが、モデルにテキストが含まれている場合に限ります。

私はもうすぐそこにいますが、モデルが変更されたときにテンプレートをオン/オフにする方法がよくわかりません。これが最も効率的な方法であるかどうかもわかりません。

マークアップは次のとおりです。

<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の例

4

1 に答える 1

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

更新されたフィドル

于 2013-03-14T18:37:04.850 に答える