TypeScript + AngularJS ：指令在范围内返回 0.$eval

Question

我创建了一个指令来编译一些 html 然后将它绑定到我的元素。

这是指令

    export class BindCompileHtmlDirective implements ng.IDirective {

      restrict = 'A';



      link = (scope: ng.IScope, element: any, attrs: any, ctrl: any) => {
        scope.$watch((scope) => {
            console.log(attrs);
            //Also tried attrs.BindCompileHtmlDirective which returns undefined
            //Tried attrs.$attr.bindCompileHtml also which returns 0 too
            return scope.$eval(attrs.bindCompileHtml);
        }, (value) => {
            console.log(value);
            // In case value is a TrustedValueHolderType, sometimes it
            // needs to be explicitly called into a string in order to
            // get the HTML string.
            element.html(value && value.toString());

            var $phe = this.$compile(element.contents())(scope);
            //element.after($phe);
        });
      }

      constructor(private $compile: any) { 
      }



      static factory(): ng.IDirectiveFactory {
        const directive = ($compile: any) => new BindCompileHtmlDirective($compile);
        directive.$inject = ['$compile'];
        return directive;
      }

  }

   angular.module('rundeckManager.directives')
      .directive('bindCompileHtml', BindCompileHtmlDirective.factory());

这是实现：

    <span id="id-of-span" bind-compile-html="{{TabsDomains.domainsLabelHtml}}"></span>

attr 对象看起来不错，包含我需要编译的字符串的值，这里是 attr 对象：

attrsObjectLog

但是我的指令 returns 0 作为值而不是编译后的字符串，我不明白为什么。

如果有人能解释并提供帮助，那将非常有帮助。

Answer 1

正如问题评论中所说，这只需要： returnattrs.bindCompileHtml

我在此处粘贴评论中的答案： “$eval 用于 angular 表达式，而不是 HTML，可能作为 angular 表达式，此 HTML 被评估为 0？bindCompileHtml 内容似乎已准备好放置在 DOM 因为它是“

TypeScript + AngularJS ：指令在范围内返回 0.$eval

TypeScript + AngularJS : Directive returning 0 on scope.$eval

data-binding

angularjs

typescript

angularjs-directive

angular-directive