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

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 ，尝试使用类似以下示例的方法，还检查示例punker ：

模板：

<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交互将产生不使用Angular指令同步DOM元素的情况。

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

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