Question

由于我试图解释标题中的情况，我在jQuery X-editable中遇到了Angular 4库的问题。

我有view如下：

model.html

<a href="javascript:;" onClick="event.stopPropagation(); event.preventDefault();" editableToggle="#editable{{selectedModel.id}}"><i class="fa fa-pencil"></i></a>
<div id="editable{{selectedModel.id}}" class="editable-textarea" editable type="textarea" url="/api/model-info" name="info" pk="{{selectedModel.id}}">
    {{selectedModel.info}}
</div>

如您所见，由于某种原因，我必须创建2个不同的指令，称为editableToggle和editable。这可能是另一个问题的主题。对于这个问题，这是这些指令的结构。

可编辑-toggle.directive.ts

import {Directive, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
    selector: '[editableToggle]'
})
export class EditableToggleDirective {
    @Input() editableToggle: string;

    constructor(private el: ElementRef) {}

    @HostListener('click') onClick(){
        $(this.editableToggle).editable('toggle');
    }
}

editable.directive.ts

import {Directive, ElementRef, Input, AfterViewInit} from '@angular/core';

@Directive({ selector: '[editable]' })
export class EditableDirective implements AfterViewInit {
    @Input() type: string;
    @Input() url: string;
    @Input() name: string;
    @Input() pk: number;

    directive: any;

    constructor(el: ElementRef){
        this.directive = $(el.nativeElement);
    }

    ngAfterViewInit(){
        var token = $('meta[name="csrf-token"]').attr('content');

        var options = {
            type: this.type,
            url: this.url,
            name: this.name,
            pk: this.pk,
            rows: 10,
            originalTitle: 'Title',
            toggle: 'manual',
            emptytext: 'Empty',
            ajaxOptions: {
                type: 'post',
                dataType: 'json'
            },
            params: function (params) {
                params._token = token;
                return params;
            }
        };

        this.directive.editable(options);
    }
}

首先，x-editable只适用于最初选择的模型。我的问题在于，当我使用不同的ID和Info更改selectedModel时，即使HTML值正确更改，初始模型的信息也会以x可编辑的弹出窗体形式写入，而不是选择了一个。

我试图尽可能地解释这种情况。如果我错了或遗漏了你的意见，请纠正我。

感谢任何帮助。

编辑：为此问题https://plnkr.co/edit/Moq3jUEbSCIS4HDO6jPq?p=preview

创建了一个plunker

Answer 1

将可编辑前缀添加到{{selectedModel.info}}

更新内容时，Angular 4 X可编辑表单值不会更改

1 个答案: