Question

<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind-html="myMarkup"></p>
</div>
<script>
    var app = angular.module("myApp", ['ngSanitize']);
    app.controller("myCtrl", function($scope) {
        $scope.myMarkup = "<h1>Hi {{name}}</h1>";
        $scope.name="Habib";
    });
</script>

Comming输出：       嗨{{name}}

期望的输出：       嗨Habib

Answer 1

您可以使用指令编译$ scope变量，因此您不需要ngSanitize

<强>样本

＆＃13;

Action3

＆＃13;

 var app = angular.module("myApp", []);
 app.controller("myCtrl", function($scope,$sce) {
        $scope.myMarkup = "<h1>Hi {{name}}</h1>";
        $scope.name="Habib";
        $scope.trustAsHtml = function(html){
    return $sce.trustAsHtml(html);
  }
 });
 
 
app.directive('compileTemplate', function($compile, $parse){
    return {
        link: function(scope, element, attr){
            var parsed = $parse(attr.ngBindHtml);
            function getStringValue() {
                return (parsed(scope) || '').toString();
            }

            // Recompile if the template changes
            scope.$watch(getStringValue, function() {
                $compile(element, null, -9999)(scope);  // The -9999 makes it skip directives so that we do not recompile ourselves
            });
        }
    }
});

＆＃13;

Answer 2

app.controller("myCtrl", function($scope,$interpolate) {
    $scope.name="Habib";
    $scope.myMarkup = $interpolate('<h1>Hi {{name}}</h1>')($scope);
});

尝试上面的代码。可能有帮助！！ $compile是$interpolate的替代方案。你也可以尝试一下。

Answer 3

你应该像这样使用$interpolate :( 注意你必须在标记之前声明插值）

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope, $interpolate) {
  $scope.name = "Habib";
  $scope.myMarkup = $interpolate("<h1>Hi {{name}}</h1>")($scope);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular-sanitize.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <p ng-bind-html="myMarkup"></p>
</div>

使用AngularJs在绑定的HTML中不显示变量

3 个答案: