Outlook如何添加＆＃39; x＆＃39;在输入字段的末尾？

Question

问题

当我输入数据并将Outlook事件绑定到其中以清除其中的数据时，

x会在Outlook add-in面板的输入字段末尾添加click。

我需要为click事件添加逻辑，但我无法在DOM中找到x。

环境

• Windows 10
• Outlook 2010（看起来不依赖于版本）

重现

当用户点击x时，数据将从input-field中移除，但数据将保留在$scope.email，因为角度$watch没有工作

我正在寻找指点：

• Outlook如何在输入字段末尾添加x？
• 如何处理页面中的明确事件？在检查时，我无法在DOM中找到x？

截图

Outlook added 'x' at end of input field

Answer 1

在模板中添加：

<div class="input-new">
  <input ng-model="textValue" ng-focus="isFocused=true" ng-blur="blur()" /> 
  <button ng-show="isFocused && textValue.length > 0" ng-click="cleanText()">X</button>
</div>

控制器中的

添加：

$scope.isFocused = false;
$scope.textValue = "";

$scope.cleanText = function() {
   $scope.textValue = "";
}

$scope.blur = function() {
    $timeout( function(){
        $scope.isFocused = false;
    }, 200 ); 
}

当然你必须在输入和div框中添加样式。

Workin example in plunker

Answer 2

Office uifTextfield指令，以便当用户单击输入字段右侧的"X" a清除值时，它将反映在绑定到它的模型中

app.directive('uifTextfield', function() {
    return {
        restrict: 'E',
        require: ['uifTextfield', '?ngModel'],
        link: function(scope, elem, attr, ctrl) {
            $(elem).find("input").bind("mouseup", function(event) {
                var $inputElement = $(this);
                if ($inputElement.val()) {
                    setTimeout(function() {
                        if (!$inputElement.val()) {
                            angular.element($inputElement).controller('ngModel').$setViewValue('');
                        }
                    }, 1);
                }
            });
        }
    };
});