javascript – 扩展angularUI popover指令以创建确认弹出窗口
作者:互联网
我想在angularJS中创建一个简单的确认弹出窗口.我已经将AngularUI用于许多其他组件,这就是为什么它似乎是扩展的自然选择.
我在plnkr中创建了一个示例,但我必须能够简单地向这样的按钮添加一个确认…
<button confirm="Are you sure you want to delete what ever" confirm-func="deleteThing()" confirm-placement="right" confirm-title="Are you sure?" class="btn btn-default">Delete? </button>
这可以通过使用我自己的模板取消或确认生产弹出窗口.但我需要能够通过“confirm-func”属性中的任何功能来确认点击运行.我做什么我无法让它发挥作用.这是我的指令扩展angularUI …
angular.module('plunker', ['ui.bootstrap']).directive( 'confirmPopup', function () {
return {
restrict: 'A',
replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', func: '&' },
templateUrl: 'confirmPopup.html',
link: function ($scope, element, attrs) {
$scope.confirm = function(){
$scope.func();//here is where we want to run the function, but it does not work!
$scope.$parent.tt_isOpen = false;
}
$scope.cancel = function(){
$scope.$parent.tt_isOpen = false;
}
}
};
})
.directive( 'confirm', [ '$tooltip', function ($tooltip) {
return $tooltip( 'confirm', 'confirm', 'click' );
}]);
Plunkr附例:http://plnkr.co/edit/W9BWMc3x5khuaMEL7lp1?p=preview
解决方法:
这不是您具体问题的直接答案,但我希望在我的项目中做一些类似的事情(一个确认弹出窗口的简单指令),最后继续使用此博客文章中的解决方案:
http://wegnerdesign.com/blog/angular-js-directive-tutorial-on-attribute-bootstrap-confirm-button/
它一直在为我做得很好.我稍微修改了它,以便通过属性应用自定义CSS类.我的修改在这里:
https://github.com/sergkr/swot/blob/master/client/directives/confirmButton.js
用法示例:
<button type="button" confirm-button="deleteQuestion($index)" message="Are you sure you want to remove this question?"></button>
以及该指令的屏幕截图:
标签:javascript,angularjs,twitter-bootstrap,angularjs-directive,angular-ui-bootstrap 来源: https://codeday.me/bug/20190831/1772717.html