如何在AngularJS中添加/删除DOM元素？

我想显示简单的消息模式对话框引导模式对话框

该对话框是一段HTML：

<div class="dlg">.....</div>

当我想显示一个对话框并在对话框关闭时将其删除时，如何将这段HTML添加到DOM树中

---

显然，这应该在指令中完成。但是我如何调用控制器的按钮单击处理程序中指令的“ShowDialog”方法呢？

如注释所示，通过DI中的$modal，查看示例：

---

Ui bootstrap通过其$modal服务实现了这一点，该服务公开了open函数。最后，second servive$modalStack的函数将执行body=angular.element.find'body'，然后执行body.appendCustomHTML。看看teir代码：最简单的方法是使用ng if并将条件切换为true/false。

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
            </div>
            <div class="modal-body">
                <ul>
                <li ng-repeat="item in items">
                    <a ng-click="selected.item = item">{{ item }}</a>
                    </li>
                    </ul>
                    Selected: <b>{{ selected.item }}</b>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" ng-click="ok()">OK</button>
                        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                        </div>
                        </script>

                        <button class="btn btn-default" ng-click="open()">Open me!</button>
                        </div>

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};,
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
};