AngularJS 在元素和触发元素点击后添加内容的指令

Question

我正在尝试创建一个非常简单的指令，要求在单击按钮时进行确认。

以下html：

<button kr-confirm>Delete</button>

应该编译成：

<button kr-confirm>Delete</button>
<span ng-show="vm.isOpen"> 
   Are you sure?
   <span class="btn btn-sm btn-danger">Yes</span>
   <span class="btn btn-sm btn-secondary">No</span>
</span>

我想在 templateUrl 中处理这个问题，但找不到在元素后添加模板的选项。

我最终在 link 函数中添加了 DOM 并调用了 element.on('click') 但这似乎不起作用。

根据 HTML 和预期结果，我将如何实施？

最好的情况是可以用 templateUrl 解决。

查看我现在的 fiddle:

https://jsfiddle.net/kraaness/4rn8ycb3/

Answer 1

您应该创建一个组件来为您提供所需的功能。请参阅下面的快速 <confirmation-button> 组件。

angular.module('app', [])
  .component('confirmationButton', {
    bindings: {
      onConfirm: '&'
    },
    template: '<button ng-click="$ctrl.confirm = true">Delete</button>' +
      '<div ng-show="$ctrl.confirm">Are you sure?' +
      '<button ng-click="$ctrl.onConfirm(); $ctrl.confirm = false">Yes</button>' +
      '<button ng-click="$ctrl.confirm = false">No</button></div>'
  })
  .run(function($rootScope) { // using $rootScope just for sake of the demo
    $rootScope.delete = function() {
      alert("Oh no!");
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="app">
  <confirmation-button on-confirm="delete()"></confirmation-button>
</div>

AngularJS 在元素和触发元素点击后添加内容的指令

AngularJS directive to add content after element and trigger element click

angularjs

angular-directive