关于javascript：ng-bind-html不适用于脚本

angularjsjavascriptng-bind-html

ng-bind-html doesn't work with script

我是棱角分明的新手。
所以这可能是一个非常基本的问题

我有外部API数据，这是用户生成的内容。
客户想要动态显示内容。在内容中，有一个脚本，其中创建了指令，我尝试使用ng-bind-html，但它不起作用。

1

想要执行创建指令的脚本，并且应该在html内容中注入相同的指令。

1
2
3
4
5
6

var data = ' var app = angular.module(\'main\', []);' +
'app.directive(\'slideImageComparison\', function () {return { restrict: \'E\', scope: { imageInfo: \'=info\'}, link: function (scope, elem, attr) { console.log(\'directive called\');' +
'},template: \' test \'' +
'}; }); <slide-image-comparison></slide-image-comparison>';

$scope.myHTML= $sce.trustAsHtml(data)

我添加了反斜杠以逃避单引号。

在这里感谢帮助。

相关讨论

演示：http：//plnkr.co/edit/L8FWxNSQO6VAf5wbJBtF？p = preview

基于在bootstrap之后添加模块指令并应用于动态内容

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js">
<script src="./app.js">
</head>

<body ng-app="demo">

<external-html external-data="external"></external-html>

</body>

</html>

JS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var module1 = angular.module("demo", []);
module1.controller("mainController", ["$scope", function(sp) {

var external = `
module1.lazyDirective('sl', function () {
return { restrict:'E',
scope: { imageInfo: '=info'},
link: function (scope, elem, attr) {
console.log('directive called');
},
template: ' test '};
});

<sl></sl>`;
sp.external = external;
}]).config(function($compileProvider) {
module1.lazyDirective = $compileProvider.directive;
}).directive('externalHtml', ["$parse","$compile", function($parse, $compile) {
return {
restrict: 'E',
link: function(scope, element, attrs) {
const data = $parse(attrs.externalData)(scope);
const el = document.createElement('div');
el.innerHTML = data;
const scripts = el.getElementsByTagName("script");
for (let i in scripts) {
console.log(scripts[i].textContent)
eval(scripts[i].textContent);
}

element.append($compile(data)(scope));

}
}
}]);

相关讨论