Question

我正在尝试使用ng-bind-html添加类似动态HTML的内容，但它不能使用$ scope变量

这是我的角色代码

1）我的控制器

$scope.name = "Parshuram"
$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<div>{{name}}</div>");

此外，我的字符串是动态的

"<div><table class=" + "\"table table - bordered table - responsive table - hover add - lineheight table_scroll\"" + "><thead><tr><td>Name</td><td>Age</td></tr></thead><tbody><tr ng-repeat=" + "\"tr in dyna\"" + "><td>{{tr.name}}</td><td>{{tr.age}}</td></tr></tbody></table></div>"

所以我不能用$ scope

替换每个变量

2） - 我的HTML

<div ng-app="mymodule" ng-controller="myModuleController">
    <div ng-bind-html="thisCanBeusedInsideNgBindHtml"></div>
</div>

我得到了这个输出

{{name}}

我的预期输出是

Parshuram

请任何人可以帮我解决这个问题，那个$ sce不会绑定范围变量吗？ ..

Answer 1

我在这里创建了一个有效的plnkr：https://plnkr.co/edit/uOdbHjv1B7fr0Ra1kXI3?p=preview

问题是ng-bind-html没有绑定到范围。你应该手动编译内容。

一个有效且可重复使用的解决方案应该是创建一个指令，使用任何外部模块进行白化。

function compileTemplate($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() { return (parsed(scope) || '').toString(); }    
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  
             });
        }
    }
  }




<div ng-app="mymodule" ng-controller="myModuleController">
    <div ng-bind-html="thisCanBeusedInsideNgBindHtml" compile-template></div> 
</div>

Answer 2

ng-bind-html做了它在锡上的说法：它绑定了html。它不会将角度模板代码绑定到您的dom中。

你需要这样做：

$scope.thisCanBeusedInsideNgBindHtml = 
    $sce.trustAsHtml("<div>"+$sanitize(name)+"</div>");

要执行此操作，您需要在javascript ngSanitize中添加模块angular-sanitize.js。见https://docs.angularjs.org/api/ngSanitize

如果你想插入一些包含angular指令的html，你应该编写自己的自定义指令来执行它。

Answer 3

在你的html中使用 {{名称}} 将在HTML代码中使用{{var}}表示法来评估该变量。

Answer 4

你可以这样做：

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml('<div ng-bind="name"></div>');

Answer 5

抱歉，我再做一个答案。

如果你有

$scope.thisCanBeusedInsideNgBindHtml = $sce.trustAsHtml("<div>{{name}}</div>");

然后你可以做

var str = "<div>{{name}}</div>";
var output = str.replace('{{name}}', $scope.name);

这似乎是唯一的选择。

ng-bind-html无法使用我的$ scope.variable

5 个答案: