我试图用@Directive
语法将指令转换为ng-metadata
,但我很难找出一个特定的部分。该指令要求element.html()
,但我似乎无法弄清楚新指令在哪里。ng-metadata指令,从指令中的元素获得“html”
这是指令;
angular.module('ngContenteditable', ['ngSanitize']).
directive('contenteditable', ['$sce','$sanitize', function($sce, $sanitize) {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModel) {
if (!ngModel) return;
ngModel.$render = function() {
element.html($sanitize(ngModel.$viewValue || ''));
};
element.on('blur keyup change', function() {
scope.$apply(readViewText);
});
function readViewText() {
var html = element.html();
if (attrs.stripBr && html == '<br>') {
html = '';
}
ngModel.$setViewValue(html);
}
}
};
}]);
到目前为止,这是我对ng元数据版本。
import { Directive, Inject, Self, Optional, Input, HostListener } from 'ng-metadata/core';
@Directive({
selector: '[contenteditable]'
})
export class ngDirective {
@Input() stripBr: string;
constructor(
@Inject('ngModel') @Self() @Optional() private ngModel: any,
@Inject('$sce') private $sce: ng.ISCEService,
@Inject('$sanitize') private $sanitize: ng.sanitize.ISanitizeService) {
}
@HostListener('blur keyup change')
onNgChange() {
}
onReadViewText() {
let html = this.html(); // ... how do I get the HTML?
}
}
它可能应该是$ element服务和$ element.html()。它不特定于ng-metadata。当代码从链接功能移动到控制器并返回时,这是如何完成的。 – estus
但是'$ element'从哪里来? – Ciel
来自依赖注入。 https://docs.angularjs.org/api/ng/service/$compile#-controller- – estus