替换指令中的值而不替换整个指令

Replacing value inside directive without replacing entire directive

本文关键字：替换 指令      更新时间：2023-09-26

我的指令有一个模板，其中包含一个名为 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）？

这是一个工作 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);
            }
        }
    };
}

听起来你想要某种占位符文本/html来代替content绑定，直到它被解决并应用。在这种情况下，您最好在模板中修复它：

<div class="directive-view">
    <span class="directive-header">My Directive</span>
    <span ng-bind-html="content">Some HTML &mdash; some more HTML</span>
</div>

是的，.directive("my-directive", myDirective);应该.directive("myDirective", myDirective);但我想这只是错字。

相关文章：