NG绑定，HTML不符合我的$ scope.variable

工作，我尝试使用添加类似动态HTML NG绑定，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>"

，所以我不能replac e为$范围

2）每个变量 - 我的HTML

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

我得到这个输出

{{name}}

我的预期输出是

Parshuram

请谁能帮助我卡住在这一点上，这$ sce不绑定范围变量？ ..

来源

2016-11-24 Parshuram Kalvikatte

如果你从服务器获取该html，并且可以让服务器返回一个恰好是你想要的html的响应，那么就使用'ng-include =“'// theserver/somepage'”'将获取html并将其包含为模板。 – Duncan

你能否详细解释一下，这是我的返回HTML字符串服务 –

$ http.get（'http：// localhost：22475/api/mymodule'）.then（function（response）{ console.log（response。数据）;}）; –

我创建了一个工作plnkr这里：https://plnkr.co/edit/uOdbHjv1B7fr0Ra1kXI3?p=preview

问题是NG绑定，HTML不是必然的范围。你应该手动编译内容。

一个有效和可重复使用的溶液应创建一个指令，whitout使用任何外部模块。

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>

来源

2016-11-24 15:02:16 Karim

绑定它不，这还没有工作对我来说仍然给{{名}} –

你尝试调试？你有没有得到任何错误？ – Karim

没有错误，但仍然输出{{name}} –

ng-bind-html做什么它在锡说：它结合HTML。它不会将角模板代码绑定到你的dom中。

你需要做这个：

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

要做到这一点，你会想从JavaScript的angular-sanitize.js包括模块ngSanitize。见https://docs.angularjs.org/api/ngSanitize

如果要插入一些HTML，包括角指令，那么你应该写自己的自定义指令去做。

来源

2016-11-24 14:39:00 Duncan

我需要为它添加sanitize.min.js吗？ –

您需要使用angular-sanitize，但是您应该考虑是否可以使用自定义指令（或组件）来完成所需的操作。 – Duncan

我从我的服务器发送一个字符串，所以不能更喜欢一个指令 –

在HTML只使用 {{名}} 的{{VAR}}标记是在HTML代码中使用，以评估该变量。

来源

2016-11-24 14:44:26 RichardC

不，我不想使用HTML中我的HTML字符串是从我的服务器快到了，我想用HTML –

你可以这样做：

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

来源

2016-11-24 15:25:11 trichetriche

我的问题是如何将我的范围变量绑定$ SCE HTML绑定 –

我刚编辑我的回答，请检查 – trichetriche

请我的问题，我想我的范围变量绑定，因为我发送从我的服务器字符串与HTML结合它，如果任何其他方式，这样我可以发送一些字符串和变化我的名字作为范围变量的变化，但我想给串HTML –

对不起，我让另一个答案。

如果你有

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

然后，你可以做

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

这似乎是唯一的选择。

来源

2016-11-24 15:48:41 trichetriche

对不起，我不能使用替代我在这里的HTML字符串可以是任何想为这个如“

Name	Age
{{tr.name}}	{{tr.age}}

，所以我不能代替每个变量 –

如果无法读取检查我的更新问题 –

NG绑定，HTML不符合我的$ scope.variable

回答

相关问题