Question

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

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

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

Answer 1

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

重新编译该DOM

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

要确保此功能正常，您需要在角度应用中添加ngSanitize模块。

Demo plunkr

您的工作方式不是执行DOM操作的标准方法在AngularJS中。标准方法是在html中保留ng-bind-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

我在改变div

1 个答案:

标准方式