在ng click上生成动态的HTML

22 浏览
0 Comments

在ng click上生成动态的HTML

我想要插入一个包含ng-bind和在ng-click上使用指令的动态html元素。我想要在html中插入新的html元素。

html代码如下：

控制器代码如下：

app.controller('controller', ['$scope', function ($scope) {

$scope.createH1 = function () {

document.getElementById("page").innerHTML = document.getElementById("page").innerHTML + ("");

};

}]);

上述控制器能够插入html元素，但是新的html元素的指令不起作用。

然而，我了解到除非我们对模板/HTML进行$compile编译，否则它们不会起作用。

如果我使用app.directive( ngPage, ..)来添加我的动态html，它会在app启动时插入。但我只想在点击按钮时插入。

我是angular js的新手，有些困惑，请帮助我解决这个问题。

提前感谢您的帮助。

0

1 答案

0 Comments

问题的出现原因：在AngularJS中，最好将DOM操作放在指令中处理。在给定的代码中，点击按钮时，需要生成动态的HTML并替换页面上的一个元素。这种DOM操作最好放在指令中处理，而不是控制器中。

解决方法：可以创建一个指令，将需要生成的HTML编译后插入到页面中。具体做法是，在点击事件的处理程序中，使用$compile服务将HTML编译成一个AngularJS元素，然后通过angular.element方法获取目标元素并清空其中的内容，最后将编译后的元素添加到目标元素中。

以下是解决问题的代码：

app.directive('addHtml', function($compile){
  return {
    restrict: 'AE',
    link: function(scope, element, attrs){
      var html = `
Test
`,
      compiledElement = $compile(html)(scope);
      element.on('click', function(event){
        var pageElement = angular.element(document.getElementById("page"));
        pageElement.empty()
        pageElement.append(compiledElement);
      })
    }
  }
});

可以在控制器中实现相同的功能，只需编译元素并将编译后的DOM插入到页面中，而不是使用document.getElementById("page").innerHTML。但从技术上讲，最好不要在控制器中进行DOM操作。

以上是关于如何在AngularJS中在点击事件中生成动态HTML的原因和解决方法。

0