Question

我想在点击按钮时将DOM元素添加到页面中，我已经在一个名为＆＃34; newmission.html＆＃34;的新html文件中编写了要添加的内容的代码。如下图所示。

 <div class="boxheader" ng-controller="edit_vision_missionCtrl">
    <div style="float:right; clear:right; width:20%;">
        <span><a href="" style="" ng-click="deletemission(mission.id)"><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
    </div>
    <span style="font-size: large; font-family: monospace; font-weight: bold;">EDIT MISSION NAME</span><input type="text" value="Enter Mission Name" class="form-control" style="background-color: #e8e8e8">
</div>
<div style="padding-top: 10px;">
    <span style="font-size: large; font-family: monospace; font-weight: bold; margin-left:5%;">EDIT MISSION POINTS</span><br />
</div>
<div style="padding-top: 10px;">
    <ul style="float: left; width: 100%;">
        <li style="padding: 2px; width: 100%;">
            <div style="float:right; clear:right; width:20%;">
                <span><a href="" style=""><img src="assets/img/delete.png" style="width: 20%; height: 20%;"></a></span>
            </div>
            <div>
                <input type="text" value="Enter Mission Point" class="form-control" style="background-color: #e8e8e8; width: 80%;">
            </div>
        </li>
    </ul>
</div>
<div style="padding-top: 35px;">
    <a href=""><img id="addmissionpoint" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
</div>

我正在调用一个函数＆＃34; addmission＆＃34;在控制器中，将上述html文件内容添加到id为＃34; toappend＆＃34;的div中。但它不起作用。我使用JQuery来添加它，但angularJS或Javascript解决方案也会有所帮助。控制器中的功能如下所示。

var newid = 0;
$scope.addmission = function(){
    newid--;
    $.get("newmission.html", function(data) {
        $("#toappend").prepend(data);
    });
};

这是我调用函数的代码。

<div style="padding-top: 35px;">
        <a href="" ng-click="addmission()"><img id="addmission" src="assets/img/add.png" alt="addmission" style="width: 7%;height: 12%;float: right; bottom: 0;"></a>
    </div>

Answer 1

使用ng-show / ng-hide

很简单

如果你有一个按钮：

<button class="primary" ng-click="addmission()" >Addmission</button>

<div class="boxheader" ng-controller="edit_vision_missionCtrl" ng-show="whenAdmission" ng-cloak>
//all other code
</div>

当事件被触发时，简单地将When admission标志更新为true：

$scope.addmission = function(){
    $scope.whenAdmission = true;
};

这将呈现隐形html，否则它将保持隐藏状态。将标志初始化为$ scope.whenAdmission = false;在页面加载。

Answer 2

有几种方法可以插入新的DOM节点。

在您的使用案例中，由于您有一串HTML文本并希望告诉浏览器将其解析为HTML元素，因此您需要使用innerHTML。

var myElement = document.getElementById('myElement')
var someHTML = '<div style="color: blue;">I am <b>blue</b>!</div>"

myElement.innerHTML = someHTML;

这将告诉浏览器将HTML字符串解析为元素并将它们插入到myElements子树中。

由于您使用的是jQuery，因此您可以使用jQuery＆＃39; $(...).html()，这可能会调用innerHTML。

既然你正在使用Angular，你可能想要将HTML作为模板加载并将其渲染为部分而不是直接自己操作DOM（让Angular完成工作）。这是一篇关于动态加载模板的好文章：http://onehungrymind.com/angularjs-dynamic-templates/

Answer 3

您永远不应该直接操纵控制器中的DOM。这是一个可怕的，可怕的想法，它永远不应该完成。我要做的是写一个简单的指令，或者如果你真的懒惰，使用ng-include。但是对于上帝的爱，不要直接从控制器向DOM中插入东西。如果您编写指令，您可以在所有项目中反复重复使用相同的元素，并相信我，这可以节省很多时间。

学习如何编写指令。他们在第一次脸红时有点复杂，但他们确实是Angular的强大功能。

单击按钮动态添加DOM元素

3 个答案: