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

【问题标题】：How to build an inplace edit with dart angular如何使用 dart angular 构建就地编辑
【发布时间】：2017-03-14 11:02:16
【问题描述】：

直接写入 div 的 angularjs 示例给我留下了深刻的印象（无需隐藏/显示）

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 的代码会是什么样子？

【问题讨论】：

删除了 angular-dart 标签。这是angularjs，现在是一个单独的项目，策略略有不同。
你有任何关于这个问题的 Dart 示例吗？
@RandalSchwartz 我想在 dart-angular 中做同样的事情，我对 angularjs 项目不感兴趣，我使用 dart
@rkj 飞镖示例是我希望收到的答案:)），所以不，我没有飞镖示例
你能附上正确的插件链接吗？

标签： angularjs angular-dart

【解决方案1】：

您可以编写自己的指令并完全按照您的喜好调整交互和更新调用。（选择如何处理模糊、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">

【讨论】：

【解决方案2】：

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

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

【讨论】：