0

我正在尝试编写一个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)这条线不应该这样做吗？

最后一件事，input尽管我使用ng-show指令并将其绑定到isInputFieldVisible初始化为 false 的属性，但该字段在屏幕上呈现可见。任何想法为什么这不起作用？

4

0 回答 0