标签:javascript angularjs twitter-bootstrap angularjs-directive angular-ui-bootstrap
我想在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
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。