ng-bind-html не работает с моим $scope.variable

Question

Я пытаюсь добавить что-то вроде динамического HTML с помощью ng-bind-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

В вашем html просто используйте {{name}} Нотация {{var}} должна использоваться в коде HTML для оценки этой переменной.

Answer 3

Ты можешь сделать:

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

Answer 4

Извините, я делаю еще один ответ.

Если у вас есть

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

Тогда вы можете сделать

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

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

Answer 5

ng-bind-html делает то, что говорит на банке: он связывает HTML. Он не привязывает угловой шаблонный код к вашей семье.

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

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

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

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