javascript - 替换指令内的值而不替换整个指令

Question

我的指令有一个模板，其中包含一个名为 content 的范围变量:

<div class="directive-view">
    <span class="directive-header">My Directive</span>
    {{content}}
</div>

我有以下指令:

(function () {
    "use strict";

    angular
        .module('myApp.myDirective', [])
        .directive("myDirective", myDirective);

    function myDirective($compile) {
        return {
            restrict: 'E',
            scope: {
            },
            templateUrl:'../partials/directives/my-directive.html',
            controller: function($scope) {
                $scope.content = "<span>Some HTML &mdash; some more HTML</span>";
            },
            link: function (scope, element, attrs, ctrl) {
                var compiledContent = $compile(scope.content)(scope);
                scope.content = compiledContent;
            }
        };
    }
})();

我期望看到的代替 {{content}} 的是:

Some HTML — some more HTML

我看到的是:

{"0":{"ng339":23},"length":1}

如何将范围字符串的值设置为某个初始值，然后在编译指令时从指令链接内更新它(作为编译后的 HTML)？

Answer 1

这是一个工作 plunker.

首先，改变:

.directive('my-directive')

到

.directive('myDirective')

此外，根据我收集的信息，您希望使用驻留在指令中的作用域变量在编译时将 html 嵌入指令模板中。为此，您不需要 $compile。

为此，您需要使用 ngBindHtml，如下所示:

HTML:

<div class="directive-view">
    <span class="directive-header">My Directive</span>
    ><div ng-bind-html="trustAsHtml(content)"></div>
</div>

指令:

function myDirective($compile, $sce) {
    return {
        restrict: 'E',
        scope: {
        },
        template: '../partials/directives/my-directive.html',
        controller: function($scope) {
            $scope.content = "<span>Some HTML &mdash; some more HTML</span>";
        },
        link: function (scope, element, attrs, ctrl) {


            scope.trustAsHtml = function(val) {
              return $sce.trustAsHtml(val);
            }
        }
    };
}