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

Question

我发现更改 div 的 html 时出现问题：

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

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

Answer 1

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

重新编译 DOM

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

为确保这能正常工作，您需要在 angular 应用中添加 ngSanitize 模块。

Demo plunkr

The way you are doing is not a standard way of doing DOM manipulation in AngularJS. The standard approach would be keep ng-bind-html attribute there itself in html rather than adding it dynamically.

标准方式

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

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

I am getting issue in changing inner HTML of div

javascript

angularjs

data-binding

ng-bind-html

angularjs-compile

标准方式