我想插入包含 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>
Controller >
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>");
};
}]);
上面的 Controller 正在插入 html 元素，但新 html 元素的指令不起作用。
但是我开始知道，除非我们 $compile template/html ，否则它们将无法工作。
如果我使用 app.directive( ngPage, ..) 添加动态 html，它会在应用程序启动时插入。但我只想插入按钮 ng-click。
我是 Angular JS 的新手，有点困惑，请帮我解决这个问题。 提前致谢。
最佳答案
我总是更喜欢通过指令进行 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这里
关于angularjs - 点击 ng 时生成动态 html，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29094174/