javascript - ディレクティブはいつ要素をテンプレートに置き換えますか？

Question

AngularJS要素を指定したHTMLタグに置き換えてから、ディレクティブのコントローラーで関数を呼び出すキープレスハンドラーをアタッチするディレクティブを作成しようとしています。残念ながら、それは私にはうまくいきません。まず、私が使用しているコードは次のとおりです。

    .directive('amsNewEntry', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                url: '@navigateTo'
            },
            compile: function (tElement, tAttrs) {
                var text = tAttrs.text;
                var html = '<div>'
                         + '    <a href="#" data-ng-click="showInput">' + text + '</a>'
                         + '    <input data-ng-show="isInputFieldVisible" type="text" data-ng-model="inputValue" />'
                         + '</div>';
                tElement.replaceWith(html);
                return {
                    post: function (scope, element, attrs) {
                        console.log(element);
                        console.log(scope);
                        var input = $(element).find('input');
                        if (input.length > 0) {
                            console.log('attaching handler');
                            input.keypress(function (e) {
                                alert('keypress');
                                var code = e.which || e.keyCode;
                                if (code === 13) {
                                    alert('clicked enter');
                                    scope.navigate();
                                }
                            });
                        }
                    }
                }
            },
            controller: function ($scope, $location) {
                $scope.isInputFieldVisible = false;
                $scope.url = null;
                $scope.showInput = function () {
                    $scope.isInputFieldVisible = true;
                }
                $scope.inputValue = '';
                $scope.navigate = function () {
                    var target = $scope.url + '/' + $scope.inputValue;
                    console.log(target);
                    $location.path(target);
                }
            }

問題は、関数から返されたリンク後のcompile関数で、変数をコンソールアウトしたときに、element指定したHTMLにコンパイルされていないことです。ラインはそれをするべきではありませんtElement.replaceWith(html)か？

最後に、ディレクティブを使用してfalseに初期化されたプロパティにバインドしているにinputもかかわらず、フィールドが画面に表示されます。これが機能しない理由はありますか？ng-showisInputFieldVisible