нг-связывать-HTML не работает с моим $ scope.variable

Question

Я пытаюсь добавить что-то вроде динамического HTML с помощью нг-связывания-HTML, но он не работает с $ объемом переменной

Вот мой Угловой код

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

Так я не могу заме е каждая переменная с $ объем

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

проблема заключается в том, что нг-связывать-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. Он не связывает угловой шаблон кода в вашем доме.

Вы должны сделать это вместо того, чтобы:

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

Чтобы сделать это, вы хотите включить модуль ngSanitize из яваскрипта angular-sanitize.js. См. https://docs.angularjs.org/api/ngSanitize

Если вы хотите вставить некоторый html, содержащий угловые директивы, тогда вы должны написать свою собственную настраиваемую директиву для этого.

Answer 3

В вашем HTML просто использовать {{имя}} на {{вар}} обозначение будет использоваться в HTML-коде, чтобы оценить эту переменную.

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); 

Это, кажется, единственный вариант.