Question

我有一个自定义降价指令，工作正常。现在我想在通过markdown指令加载的内容中使用自定义youtube指令。 youtube指令本身工作正常，但只要我把它放在markdown文件中，它就会被angular忽略。

以下工作正常（但不是我想做的）：

html的

<div markdown link="contentfile.md">
</div>

<div my-youtube code="'videoidhere'"></div>

.MD

markdown content here

以下是我想要做的事情（但不起作用）：

html的

<div markdown link="contentfile.md">
</div>

.md

markdown content here

<div my-youtube code="'videoidhere'"></div>

more markdown content here

在第二种情况下，似乎从未调用过YouTube指令。

在评估markdown指令后，我需要做什么来告诉angular评估该指令？

为完整起见，以下是指令：

降价：

app.directive( 'markdown', function( $http ) {
    var converter = new Showdown.converter();
    return {
        restrict: 'A',
        scope: { link: '@' },
        link: function ( scope, element, attrs ) 
        {   
            attrs.$observe('link',function(link)
            {
                $http.get('modules/test/files/' + link).success(function(response)
                {
                    var htmlText = converter.makeHtml(response);
                    return element.html(htmlText);
                });
            });
        }
    };
});

的YouTube：

app.directive('myYoutube', function( $sce ) {
  return {
    restrict: 'EA',
    scope: { code:'=' },
    replace: true,
    template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
    link: function (scope) {
        scope.$watch('code', function (newVal) {
           if (newVal) {
               scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
           }
        });
    }
  };
});

Answer 1

您确实使用.md指令将DOM添加到markdown文件中，但由于它没有编译，因此angular不会注册它。

这样的事情应该有效：

$http.get('modules/test/files/' + link).success(function(response)
{
    var htmlText = converter.makeHtml(response);
    element.html(htmlText);
    $compile( element.contents() )( scope );
    return element;
});

指令内的指令

1 个答案: