单击时生成动态 html

Question

我想插入包含 ng-bind 和 ng-click 指令的动态 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>

控制器>

    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 元素的指令不起作用。

但是我开始知道，除非我们 $compile template/html 它们不会工作。
如果我使用 app.directive( ngPage, ..) 添加我的动态 html，它会在应用程序启动时插入。但我只想在按钮 ng-click 上插入。

我是 angular 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>

代码

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

generate dynamic html on ng click

click

angularjs