ng-metadata指令，從指令中的元素獲得「html」

我試圖用@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? 
    } 
}

來源

2017-02-26 Ciel

它可能應該是$ element服務和$ element.html（）。它不特定於ng-metadata。當代碼從鏈接功能移動到控制器並返回時，這是如何完成的。 – estus

但是'$ element'從哪裏來？ – Ciel

來自依賴注入。 https://docs.angularjs.org/api/ng/service/$compile#-controller- – estus

一種用於納克 - 元數據@Directive和@Component類實際上是一個控制器類。和指令控制器具有本地依賴性 - $scope，$element等

$element應注入構造任何其他依賴和喜歡$element.html()使用。

來源

2017-02-26 23:26:59 estus

這很好。非常感謝。我覺得自己像一個白癡，但我是一個有工作代碼的白癡！ – Ciel

不客氣。 – estus

ng-metadata指令，從指令中的元素獲得「html」

回答

相關問題