Angular指令中的element.html（）問題

Question

我是Angular的新手。 我有一個指令，在linkFunction中，我可以通過使用attribute [“ attribute-value”]將范圍設置為某個值。 我期望element.html（）提供指令的內部html。

    .directive("sfGroupbar", function () {
    var linkFunction = function (scope, element, attributes) {
        scope.text = element.html();
        scope.attr = attributes["text"];
    };

    return {
        restrict: 'E',
        templateUrl: "controls/groupbar.html",
        link: linkFunction,
        scope: {}
    };

在我看來，我正在像這樣使用指令...

<sf-groupbar warning="50" error="80" text="Web Server">Some Text</sf-groupbar>

在groupbar.html中，我正在使用類似這樣的代碼...

<div ng-controller="groupbarController">
{{text}} <br />
{{attr}}
</div>

我期望看到“某些文本”和“ Web服務器”作為輸出。 我只獲得Web服務器作為輸出，而不是“某些文本”，而得到以下輸出...

<div ng-controller="groupbarController">
{{text}} <br />
{{attr}}
</div>

Answer 1

您需要像這樣在范圍定義中包括text和其他屬性

scope { text : '=' } ，並且您可能想將transclude選項添加為true來嘗試在指令中獲取文本。 我確定您會對閱讀文檔指令以操縱DOM的這一部分感興趣

Answer 2

您必須將指令的transclude屬性設置為true並且必須在template或templateurl的HTML元素內包含ng-transclude屬性，以使指令的innerHTML呈現。

這是根據您的代碼工作的插件，

http://embed.plnkr.co/sXoLPxeFA21fxzzeAcVs/preview

希望這可以幫助！！！！