我的指令有一个模板,其中包含一个名为 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 — 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 — some more HTML</span>";
},
link: function (scope, element, attrs, ctrl) {
scope.trustAsHtml = function(val) {
return $sce.trustAsHtml(val);
}
}
};
}
关于javascript - 替换指令内的值而不替换整个指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35811612/