Javascript 指令何时用模板替换元素？

我正在尝试编写一个

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

.directive（'amsNewEntry'，function（）{
返回{
限制：'E'，
替换：正确，
范围：{
url:“@navigateTo”
},
编译：函数（远程通讯、tAttrs）{
var text=tAttrs.text；
var html=''
+ '    '
+ '    '
+ '';
替换为（html）；
返回{
post：功能（范围、元素、属性）{
控制台日志（元素）；
console.log（范围）；
变量输入=$（元素）.find（'input'）；
如果（input.length>0）{
log（'attachinghandler'）；
输入。按键（功能（e）{
警报（“按键”）；
var代码=e.which | | e.keyCode；
如果（代码===13）{
警报（“单击输入”）；
scope.navigate（）；
}
});
}
}
}
},
控制器：功能（$scope，$location）{
$scope.isInputFieldVisible=false；
$scope.url=null；
$scope.showInput=函数（）{
$scope.isInputFieldVisible=true；
}
$scope.inputValue=''；
$scope.navigate=函数（）{
var target=$scope.url+'/'+$scope.inputValue；
控制台日志（目标）；
$location.path（目标）；
}
}

问题是，在从

compile

函数返回的post-linking函数中，当我控制台输出

元素

变量时，它仍然没有被编译到我指定的HTML中。

tElement.replaceWith（HTML）

行不应该这样做吗

---

最后一件事是，

input

字段在屏幕上显示为可见，尽管我使用了

ng show

指令并将其绑定到初始化为false的

isInputFieldVisible

属性。知道这不起作用的原因吗？

一定是其他问题。工作plunker：请注意，只要您包括在Angular之前取消jQuery，您不必使用

$（element）

--只要

element

就可以了（如plunker中所示）。另外

数据ng click=“showInput（）”

@MarkRajcok这很奇怪。您的plunker工作得很好。我不确定发生了什么事。无论如何，谢谢。