Question

我看到可以使用innerHTML在div标签之间插入HTML，例如：

document.getElementById('mydiv').innerHTML = '<span
class="prego">Something</span>';

我正在研究Angularjs项目，我尝试了类似的东西：

function insertTransmissionHTML(param){
        var transmission = 'transmission'+param;
        var partrans = 'partrans'+param;

        document.getElementById(partrans).innerHTML = '<form class="form-horizontal"><div ng-repeat="param in '+transmission+'"><label class="control-label">{{param.libelle}}</label><input class="form-control" type="text" ng-model="param.valeur"></div></form>';
    }

然后我调用函数：

insertTransmissionHTML("FTP");

这是HTML：

<div id="partransFTP" class="tab-pane fade">            
</div>

我使用带有一些参数的$ scope.transmissionFTP，我应该有类似的东西：

parameter 1
parameter 2
...

但我有：

 {{param.libelle}}

看起来这里的angularjs不起作用，它变成了一个简单的HTML。

编辑：这是我开头的例子（它有效）：

<div id="partransFTP" class="tab-pane fade">
  <form class="form-horizontal"> 
    <div ng-repeat="param in transmissionFTP">
      <label class="control-label">{{param.libelle}}</label>
      <input class="form-control" type="text" ng-model="param.valeur">          
    </div>
  </form>
</div>

我拥有所有参数（来自$ scope.transmissionFTP）

parameter 1
parameter 2
...

但我必须动态地做点什么。当我使用insertTransmissionHTML时，为什么它显示{{param.libelle}}而不是我的所有参数？

有人提出建议吗？非常感谢你！

Answer 1

我对你的问题感到困惑，但是当我需要注入动态HTML时，我使用以下指令：

   app.directive('dynamic', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function (html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
}]);

在我的Angular控制器中，我将HTML字符串保存到范围变量

var $scope.myScopeVariable = '<div>My HTML Goes HERE</div>';

，在我的html页面中，我使用：

<div dynamic = "myScopeVariable">

希望这对你有帮助。

Answer 2

您可以使用Angular ngSanitize ，尝试类似下面的示例，同时查看示例plunker：

模板：

<span ng-bind-html="name">

控制器：

var app = angular.module('plunker', ['ngSanitize']);

app.controller('MainCtrl', function($scope, $sce) {
  $scope.name = $sce.trustAsHtml('<b>World</b>');
});

Answer 3

与其他人提到的一样，直接与Angular摘要周期之外的DOM交互将产生DOM元素未与Angular指令同步的情况。

但是，为了回答您的问题，我建议使用/查看$compile以强制Angular将$scope和您的模板重新链接在一起。尝试在您的函数中添加类似的内容：

$compile(angular.element('div#partransFTP').contents())($scope);

在div标签之间使用angularjs插入html

3 个答案: