Question

我想为电子邮件地址构建一个多输入区域。我开始用纯粹的angularjs构建一个原型，它起作用了：

如果点击其中一个元素，则会显示输入字段：

$scope.focus = true;

这是我需要显示输入字段的变量。如果focus为false，则不显示输入字段。或者如果该区域收到点击事件。

为了将注意力设置在输入上，为了直接开始输入，我使用：

element[0].focus();

除非我使用离子框架，否则无效。一旦输入得到关注，就会被带走：

ionic-fiddle

为什么通过使用离子来消除焦点？

Answer 1

autofocus似乎是个问题。它会立即触发模糊事件并导致再次隐藏输入字段。输入可见后，尝试手动关注输入字段（使用$ timeout）。见http://jsfiddle.net/awqtsLpy/。我将edit函数移动到directive.link部分以访问元素。

app.directive('emailRecipients', function ($timeout) {
    return {
        restrict: 'E',
        controller: function ($scope) {
            $scope.focus = false;
            $scope.addressees = [];
            var i = 10;
            while (i) {
                $scope.addressees.push({
                    "name": i
                });
                i--;
            }
        },
        link: function ($scope, element) {
            $scope.click = function () {
                $scope.focus = !$scope.focus;
                $scope.value = null;
            }
            $scope.deleteFromInput = function ($event) {

                $event.stopPropagation();
            }
            $scope.edit = function ($event, addressee) {
                $event.stopPropagation();
                $scope.value = addressee;
                addressee.editable = true;
                $scope.focus = true;
                $timeout(function () {
                    element.find('input').focus();
                });
            }
        }
    }
});

离子焦点从输入 - emelent中删除

1 个答案: