ng-bind-html不能与我的$ scope.variable一起工作 [英] ng-bind-html not working with my $scope.variable

问题描述

我尝试使用ng-bind-html添加动态HTML，但不能与$ scope变量一起工作

这里是我的Angular代码

1）我的控制器

$ $ p $ $ $ $ c $ $ 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>< /表>< / DIV>中
  

所以我不能用$ scope替换每个变量

2） - My HTML

 < div ng-app =mymoduleng-controller =myModuleController> ; 
< div ng-bind-html =thisCanBeusedInsideNgBindHtml>< / div> 
< / div> 
  

我得到了这个输出

  {{name}} 
  

我的预期输出是

  Parshuram 
  

请任何人都可以帮助我卡在这一点上，这$ sce不绑定范围变量？ ..

解决方案

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

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

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

 函数compileTemplate（$ compile，$ parse）{
 return {
 link：function（scope，element，attr）{
 var parsed = $ parse（attr.ngBindHtml）; 
 function getStringValue（）{return（parsed（scope）||''）.toString（）; } 
范围$ watch（getStringValue，function（）{
 $ compile（element，null，-9999）（scope）; 
}）; 
} 
} 
} 
 
 
 
 
< div ng-app =mymoduleng-controller = myModuleController> 
< div ng-bind-html =thisCanBeusedInsideNgBindHtmlcompile-template>< / div> 
< / div> 
  

I am trying to add something like dynamic HTML using ng-bind-html but its not working with $scope variable

Here is my Angular code

1)My controller

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

Also that my string is dynamic

"<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>"

So i cant replace every variable with $scope

2)- My HTML

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

I got this output

{{name}}

My expected output is

Parshuram

Please can anyone help i am stuck at this point,does that $sce does not bind scope variable?? ..

解决方案

I've created a working plnkr here: https://plnkr.co/edit/uOdbHjv1B7fr0Ra1kXI3?p=preview

the problem is that ng-bind-html is not bound to the scope. you should manually compile the content.

a valid and reusable solution should be creating a directive, whitout using any external modules.

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>

这篇关于ng-bind-html不能与我的$ scope.variable一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！