Question

我想在ng-click上插入包含ng-bind和指令的动态html元素。我想在

中插入新的html元素

Html看起来像这样

     <body data-ng-controller="controller">
         <div id="toolbox">
             <label>Page Width</label>
             <input type="text" data-ng-model="pageWidth" />
             <input type="button" value="H1" data-ng-click="createH1()" />
         </div>
         <div id="editor">
             <div data-ng-style="{width:pageWidth + 'px'}" data-ng-page>

             </div>

         </div>
    </body>

控制器＆gt;

    app.controller('controller', ['$scope', function ($scope) {
        $scope.createH1 = function () {
            document.getElementById("page").innerHTML = document.getElementById("page").innerHTML + ("<div class='h1' data-ng-h1 draggable></div>");
        };
    }]);

上面的控制器正在插入html元素，但是新的html元素的指令不起作用。

但是我开始知道，除非我们编译模板/ html，否则他们将无法工作。
如果我使用app.directive（ngPage，..）添加我的动态html，它会在app启动时插入。但我想只在按钮上单击插入。

我是角度js的新手，有点困惑请帮我解决这个问题。提前谢谢。

Answer 1

我总是喜欢从指令做DOM操作。所以这里的代码如下所示

<强> HTML

  <body ng-controller="MainCtrl as vm">
    <button add-html>click me</button>
    <div id="page">
      This will be replaced by text
    </div>
  </body>

<强> CODE

app.directive('addHtml', function($compile){
  return {
    restrict: 'AE',
    link: function(scope, element, attrs){
      var html = `<div class='h1' data-ng-h1 draggable>Test</div>`,
      compiledElement = $compile(html)(scope);

      element.on('click', function(event){
        var pageElement = angular.element(document.getElementById("page"));
        pageElement.empty()
        pageElement.append(compiledElement);
      })
    }
  }
});

Plunkr这里

在点击时生成动态html

1 个答案: