angularjs - 在 Angular 中替换 DIV 的内容

Question

我有一些角度代码如下：

sb = "<p>Test<p>";
app.controller("CaseBatches", function ($scope, $sce) {
                $scope.tabs = $sce.trustAsHtml(sb);
    });

现在在第一次运行时，我可以使用 $sce 服务注入 HTML 代码。

我有一个执行 javascript 函数的按钮，该函数将 sb 的值更改为：

sb = "<b>Test 1</b>";

但是当我再次运行以下代码时，我的 DIV 内容没有更新。

sb = "<b>Test 1</b>";
app.controller("CaseBatches", function ($scope, $sce) {
                $scope.tabs = $sce.trustAsHtml(sb);
    });

DOM 根本没有更新。在重新应用 sb 值之前，我尝试了许多不同的方法，例如 $sce.trustAsHTML('') 。

任何有关如何完成此任务的帮助将不胜感激。

标签： angularjs

Answer 1

您可能需要设置 $scope watcher 事件才能使其工作。

<pre ng-bind-html="tabs"></pre>

sb = "<b>Test 1</b>";
app.controller("CaseBatches", function ($scope, $sce) {
                   
        $scope.$watch('sb', function(v) {
            if (v) {
                // Render the tabs as trusted HTML
                 $scope.tabs = $sce.trustAsHtml($scope.sb);
            }
        })             
                                    
    });