javascript - 我在更改 div 的内部 HTML 时遇到问题

Question

我在更改 div 的 html 时发现了一个问题：

document.getElementsByClassName("lab")[0].setAttribute("ng-bind-html", "binds"); 
$scope.binds="<h1>run</h1>";

我ng-bind-html在 java 脚本中设置属性，因为我已经在我的代码中集成了一些插件，这些插件div是class="lab"通过 JavaScript 声明的。该属性binds已正确附加，我在检查元素中检查了这一点。事实上，每当我ng-bind-html在 JavaScript中附加属性时，ng-bind-html它都不起作用。正确的方法是什么？代码中没有错误。

Answer 1

基本上，您已经ng-bind-html动态添加了属性，这会将指令属性添加到 DOM，但ng-bind-html指令不会被评估为 html 内容。您需要使用重新编译该 DOM

$compile(document.getElementsByClassName("lab")[0])($scope)

为了确保这应该工作，您需要ngSanitize在您的角度应用程序中添加模块。

演示 plunkr

您正在做的方式不是在 AngularJS 中进行 DOM 操作的标准方式。标准方法是将ng-bind-html属性本身保留在 html 中，而不是动态添加它。

标准方式

HTML

<h1>Cleaner way</h1>
<pre ng-bind-html="binds"></pre>

代码

(function(angular) {
  'use strict';
  angular.module('bindHtmlExample', ['ngSanitize'])
    .controller('ExampleController', ['$scope', '$compile', function($scope, $compile) {
      $scope.binds="<h1>run</h1>";

    }]);
})(window.angular);

Plunkr