AngularJS指令顯示/隱藏兩個模板

Question

我有一個復選框，如下所示，我想在選中或不顯示時隱藏/隱藏滑行輸入或chkno輸入。

<input type="checkbox" id="chks" ng-model='chks' chk-no>

為了做到這一點，我編寫了如下指令，但是它不起作用。 我的指令中到底是什么問題？

app.directive('chkNo', function($compile,$log)
{
    var template_taxid = "<label id='taxidlbl'>Tax ID Number</label><br/><input type=text' id='taxid' name='taxid' placeholder='Tax ID Number' ng-model='taxid' required>";
    var template_chkno = "<label id='chklbl'>Check Number</label><br/><input type='text' id='chn' placeholder='Checking Number' ng-model='chn' required>";

    var getTemplate = function(chks)
    {
        var template = '';
        if(chks){
            template = template_taxid;
        }
        else
        {
            template = template_chkno;
        }
    }
    var linker = function(scope,element, attrs)
    {
        element.html(getTemplate(scope.chks)).show();
        $compile(element.contents())(scope);
    }
    return{
        restrict    : 'EA',
        replace     : true,
        link        : linker
    }
});

Answer 1

你可以只用ng-show ng-hide

<input type="checkbox" ng-model='chks'>

<div ng-show"chks">
    <label >Tax ID Number</label>
    <br/>
    <input type=text' name='taxid' placeholder='Tax ID Number' ng-model='taxid' required>"
</div>
<div ng-hide"chks">
    <label>Check Number</label>
    <br/>
    <input type='text' placeholder='Checking Number' ng-model='chn' required>
</div>