AngularJS指令显示/隐藏两个模板

Question

I have a checkbox as follows, and I want to show/hide taxid input or chkno input when it is checked or not.

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

Inorder to do this I have written a directive as follows, but it isn't working. what exactly is the issue in my directive?

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

you can just use 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>