在 ng 点击时生成动态 html答案

【问题标题】：generate dynamic html on ng click在 ng 点击时生成动态 html
【发布时间】：2015-05-19 14:11:35
【问题描述】：

我想在 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>

控制器 >

    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 的新手，有点困惑，请帮帮我。提前致谢。

【问题讨论】：

标签： angularjs click

【解决方案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这里

【讨论】：

我们不能直接从控制器执行此操作吗？我知道我们不应该将这些功能放在控制器中，但是它可以从控制器中工作吗？只想知道
是的，它可以从控制器工作，只需要编译该元素，然后附加该编译的 DOM，而不是执行 document.getElementById("page").innerHTML，您可以粘贴与我编写的代码相同的代码，而无需 click 事件..但从技术上讲，您不应该从控制器进行 DOM 操作