javascript - 使用 angularjs 在 div 标签之间插入 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

我对你的问题有点困惑，但是当我需要注入(inject)动态 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 Controller 中，我将 HTML 字符串保存到范围变量

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

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

<div dynamic = "myScopeVariable">

希望这会对您有所帮助。