如何使用 dart 构建就地编辑 angular

Question

我对直接写入 div 的 angularjs 示例印象深刻（无需 hide/show ）

https://docs.angularjs.org/guide/forms（部分实现自定义表单控件（使用 ngModel））

    angular.module('form-example2', []).directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$render = function() {
      elm.html(ctrl.$viewValue);
    };
}});

我其实不明白是谁截取了keyup事件，把它放到$viewValue中，然后写回div，所以我无法在dart中重现这个特性angular.

任何人都可以用指令解释 div 幕后发生的事情吗？ AngularDart 的代码会是什么样子？

Answer 1

contenteditable 是一个 html5 属性，允许您编辑任何内容，与 angular 本身无关：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

设置和读取值由 ngModel 指令处理，您可以在 AngularDart 中使用相同的指令 - 我没有尝试过，但我认为它应该可以工作。如果不是，您可能需要手动收听更改事件（或者甚至更好地向 ngModel 发送补丁）。

Answer 2

您可以编写自己的指令并根据需要调整交互和更新调用。（选择如何处理 blur、keyup、keydown 事件等）我是这样做的。这是一个基本示例，说明如何使用 Angular 2 和 Dart (AngularDart).

通过双向绑定构建自定义指令。

contenteditable.dart

import 'dart:html';
import 'package:angular2/core.dart';

@Directive(
  selector: '[contentEditable]', //Selector that you'll use in your templates
)
class ContentEditable implements OnChanges {
  Element _el; //holding element's properties and content

  @Input()
  String contentEditableModel;

  @Output()
  EventEmitter contentEditableModelChange = new EventEmitter();

  //Constructor
  ContentEditable(ElementRef ref) {
    _el = ref.nativeElement;
  }

  //This method is called on blur event (can be also 'keyup', 'keydown' etc.)
  @HostListener('blur')
  void onBlur() {
    contentEditableModelChange.emit(_el.text);
  }

  //This implementation updates the editable elements content
  //when model is updated somewhere else
  @override
  ngOnChanges(Map<String, SimpleChange> changes) {
    changes.forEach((String propName, SimpleChange change) {
      _el.innerHtml = change.currentValue;
    });
  }
}

下面是如何在组件中使用指令（您刚刚创建的）...

my_component.dart

import 'package:angular2/core.dart';
import 'package:angular2_components/angular2_components.dart';

import 'contenteditable.dart';

@Component(
  selector: 'my-component',
  styleUrls: const ['app_component.css'],
  templateUrl: 'my_component.html',
  directives: const [ContentEditable],
)

class MyComponent {
  String some_var = "Hello editable!";
}

my_component.html

<div contentEditable [(contentEditableModel)]="some_var">Some text that's overridden by some_var</div>
<h1>Here you see the value updating: {{some_var}}</h1>
And from here you can update it too: <input [(ngModel)]="some_var">

如何使用 dart 构建就地编辑 angular

How to build an inplace edit with dart angular

angularjs

angular-dart