Question

我正在尝试使用ng-metadata语法将指令转换为@Directive，但我在查找特定部分时遇到了问题。该指令要求element.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-metadata版本所拥有的。

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?
    }
}

Answer 1

ng-metadata @Directive和@Component的类实际上是一个控制器类。指令控制器具有本地依赖关系 - $scope，$element等

$element应该作为任何其他依赖项注入到构造函数中，并像$element.html()一样使用。

带有ng-metadata的指令，得到＆＃34; html＆＃34;来自指令中的元素

1 个答案: