变量未在使用 AngularJs 的绑定 HTML 中显示答案

【问题标题】：Variable is not showing in binded HTML using AngularJs变量未在使用 AngularJs 的绑定 HTML 中显示
【发布时间】：2018-02-21 13:34:18
【问题描述】：

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

即将输出：嗨{{name}}

期望的输出：嗨哈比布

【问题讨论】：

嗨 @habib，你能导入 angular-sanitize 吗？
是的，我导入了，但还是不行
你使用的是哪个版本的 AngularJS？
AngularJs 1.6.4
Sanitize 和 AngularJS 的版本一样吗？

标签： angularjs angularjs-directive angularjs-ng-model ng-bind-html

【解决方案1】：

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

演示

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind-html="trustAsHtml(myMarkup)" compile-template></p>
</div>

【讨论】：

感谢您的回答，它也对我有用，但我更喜欢另一个简单明了的答案。

【解决方案2】：

你应该像这样使用$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>

【讨论】：

【解决方案3】：

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

试试上面的代码。可能有帮助！！ $compile 是 $interpolate 的替代品。你也可以试试。

【讨论】：