Question

我正在使用角度材质，并且弹出一个模态，可以在其中弹出可以编辑数据的位置，这个内联编辑区域是使用组件创建的。当用户点击这些值时，这些值变为可编辑状态，当用户点击输入键时，值保存，当用户点击esc键时，模态被取消。

有时当用户单击要编辑的值时，意外地继续点击模态或其他值字段而不按Enter键，数据不会保存，用户必须再次重新键入所有内容。所以我想要一个功能，当用户在编辑时点击模态外，数据应该自动保存或者他们点击另一个值进行编辑而不输入当前值，数据应该自动保存

我在下面的代码中注释了我的尝试。我尝试的问题是，1）在模态外部单击时不保存，2）单击另一个值时不保存当前编辑的值，仅在单击我正在编辑的同一输入字段内时保存value.so它基本上只用点击替换回车键，但没有给我任何上面描述的功能。

如果可能，一旦用户单击该值并且该值变为可编辑，则用户单击的任何其他位置都应触发保存当前输入的值。这是组件和控制器代码

component defined 
let inlineEditComponent = {
restrict:'E',
bindings:{
    identifier:"=", 
    value:"=",
    onUpdate:"=",
    display:"=",
    valueName: "="
},
controller,
template
};

////controller 

class InlineEditController{
constructor($scope, $element, $attrs,$timeout, $mdMedia){
    "ngInject";

    this.$scope   = $scope;
    this.$element = $element;
    this.$attrs   = $attrs;
    this.$timeout = $timeout;
    this.$mdMedia = $mdMedia;
}

$onInit = () => {
    this.isEditing = false;

    this._input = angular.element(document.querySelector('#inline-input-box'));

    //handle when user hits enter
    this.$element.bind("keydown keypress", (event) => {
        if (event.which === 13) {
            this.$scope.$apply(() => {
                this.save();
            });
            event.preventDefault();
        }
    });

    //handle when user hits esc
    this.$element.bind("keydown keypress", (event)  => {
        if (event.which === 27) {
            this.$scope.$apply(()  =>{
                this.cancel();
            });
            event.preventDefault();
        }

      //my attempt 

          //    this.$element.bind("click", (event) => {
    //         this.$scope.$apply(() => {
    //             this.save();
    //             this.isEditing = true;
    //     });
    //         event.preventDefault();

    //     }); 

    });

    enableEditMode = (ev) => {
        this.isEditing = true;

        if(this.identifier == 'property'){
            this.initDataTypeFields();
        }

        this.$timeout(() =>{
            this._input[0].focus();
        },100)
    }

    save = () => {
        this._input.blur();
        this.isEditing = false;

        if (this.isTimestamp) { 
            this.value.value = moment(this.selectedDate).format("YYYY-MM-DDTHH:mm:ss");
        }

        if(this.isSelectValue){
            this.value.value = this.selectedMultiValue.id;
            this.valueNameMulti  = this.selectedMultiValue.value;
        }

        this.onUpdate(this.value, this.display);
    }

当在输入或其他输入外部单击时，Angular 1组件保存当前输入值

0 个答案: