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来解决。

看我现在的小提琴：

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

Answer 1

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

＆＃13;

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!");
    }
  });

＆＃13;

<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>

＆＃13;

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

1 个答案: