角UI引导酥料饼 - 如何添加一个关闭按钮 [英] Angular UI Bootstrap Popover - How add a close button
本文介绍了角UI引导酥料饼 - 如何添加一个关闭按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经为每一个细胞酥料饼的一个表作为在后续例如：
调用酥料饼：
＆LT; TD NG重复=我c.installmentsNG-CLASS ={第一：i.first，'最后'：i.last，提前'：i.advance.value大于0，'编辑'：i.edited，最后的分期'：i.last}酥料饼触发={{popoverFilter（ⅰ）}}酥料饼贴装=顶酥料饼标题={{i.id == 0'高级'：'分期付款'+ i.id}}酥料饼，追加到身体=真正的酥料饼模板=popoverTemplate（I） NG-的init =支付= I; newpayment = i.amount.rounded_value＆GT;
该酥料饼模板：
＆LT;脚本类型=文/ NG-模板ID =editPopoverTemplate.html＆GT;
＆LT;表格名称=editPayment＆GT;
＆LT; H2＆GT; {{payment.amount.value |货币：未定义：美分}}＆LT; / H＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：editPayment.newpayment $无效}＆GT;
＆LT;标签＆gt;的新值：LT; /标签＆gt;
＆LT;输入类型=数字NAME =newpaymentNG模型=newpayment级=的形式控制无微调步=1分=10所需的＆GT;
＆LT;跨度NG的消息=。editPayment.newpayment $错误类=帮助块角色=警报＆GT;
＆LT;跨度NG消息=需要＆gt;该值是强制性＆LT; / SPAN＆GT;
＆LT;跨度NG消息=分钟＆gt;该值太低＆LT; / SPAN＆GT;
＆LT;跨度NG消息=最大＆gt;该值过HIGHT＆LT; / SPAN＆GT;
＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =BTN-组BTN-组对齐角色=组＆GT;
＆LT; DIV CLASS =BTN-组角色=组＆GT;
＆LT;按钮类=BTN类型=按钮＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =BTN-组角色=组＆GT;
＆LT;按钮类=BTN BTN-主要型=按钮NG残疾=$ editPayment无效。＆GT;保存＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; / SCRIPT＆GT;
上plunker 工作的例子。
我需要通过一个取消按钮关闭酥料饼里面的酥料饼。
这是可能的？我需要扩展角UI引导库这样做呢？
任何帮助是AP preciated。
该解决方案在链接的答案建议关闭酥料饼，当用户点击酥料饼里面，或者外酥料饼，但我需要通过关闭按钮来关闭它里面酥料饼
解决方案
使用新的的妥善解决酥料饼，是开放属性，如@icfantv下面提到的，允许使用控制器作用域。我把一个活生生的例子在 codePEN ，它是这样的：
\r
\r\r
\r应用程序= angular.module（'ui.bootstrap.demo'，['UI .bootstrap']）;\r
\r
app.controller（\r
myPopoverCtrl'，['$范围'，\r
功能（$范围）{\r
\r
//查询酥料饼\r
$ scope.myPopover = {\r
\r
isOpen会：假的，\r
\r
templateUrl：myPopoverTemplate.html'，\r
\r
打开：开启功能（）{\r
$ scope.myPopover.isOpen =真;\r
$ scope.myPopover.data ='你好！';\r
}，\r
\r
关闭：函数close（）{\r
$ scope.myPopover.isOpen = FALSE;\r
}\r
};\r
\r
}\r
\r
]）; \r
＆LT; HEAD＆GT;\r
\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js\"></script>\r
＆LT;脚本的src =// maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js\"></script>\r
＆LT;脚本的src =// cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js\">\r
＆LT; / SCRIPT＆GT;\r
＆LT;链接rel =stylesheet属性HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css\">\r
\r
＆LT; /头＆GT;\r
\r
＆LT;车身\r
NG-应用=ui.bootstrap.demo\r
类=容器＆GT;\r
\r
＆LT;按钮\r
类=BTN BTN-危险\r
NG-控制器=myPopoverCtrl\r
酥料饼模板=myPopover.templateUrl\r
酥料饼标题=这是一个酥料饼\r
酥料饼贴装=底\r
酥料饼，是开=myPopover.isOpen\r
NG-点击=myPopover.open（）＆gt;点击ME＆LT;！/按钮＆GT;\r
\r
＆LT;脚本类型=文/ NG-模板\r
ID =myPopoverTemplate.html＆GT;\r
＆LT; H2 NG绑定=myPopover.data/＆GT;\r
＆LT;按钮类=BTN BTN-成功\r
NG-点击=myPopover.close（）＆GT;关闭ME＆LT;！/按钮＆GT;\r
\r
＆LT; / SCRIPT＆GT;\r
\r
＆LT; /身体GT; \r
原来的答复：
我花了对这个问题的最后两天，终于想出了一个再简单不过的黑客。这正好我的控制器：
$ scope.close =功能（E）{
EL = angular.element（e.target）.closest（TD）; //`td`是我点击的父
//元件，在这种情况下，一个`span`
$超时（函数（）{//需要$超时，所以我们不会与消化循环冲突
el.children（：第一）的触发器（亲密）。 //不能直接选择`span`元素
}）;
}，
现在我们成立了关闭触发对供应商：
的app.config（['$ tooltipProvider'，函数（$ tooltipProvider）{
$ tooltipProvider.setTriggers（{
'点击'：'亲密'，//点击次数现在只开了提示，关闭事件关闭。
}）;
}]）;
和我的自定义酥料饼的HTML模板：
＆LT;按钮式=按钮
类=BTN BTN-SM BTN-成功拉权
NG-点击=关闭（$事件）＆GT;关闭＆LT; /按钮＆GT;
瞧！我现在可以通过按钮关闭酥料饼！
I've a table with a popover for every cell as in the follow example:
the call to popover:
<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >
The popover template:
<script type="text/ng-template" id="editPopoverTemplate.html">
<form name="editPayment">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
<label>New value:</label>
<input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
<span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
<span ng-message="required">The value is mandatory</span>
<span ng-message="min">The value is too low</span>
<span ng-message="max">The value is too hight</span>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" type="button" ng-disabled="editPayment.$invalid">Save</button>
</div>
</div>
</form>
</script>
I need to close the popover via a "Cancel" button inside the popover. It's possible? I need to extend the Angular UI Bootstrap library to do that?
Any help is appreciated.
The solution suggested in the linked answer close the popover when user click inside the popover, or outside the popover, but i need to close it by "close" button inside the popover.
解决方案
The proper solution using the new popover-is-open attribute, as mentioned by @icfantv below, allows the use of controller scopes. I placed a live example in Codepen, and it goes like this:
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'myPopoverCtrl', ['$scope',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = 'Hello!';
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js">
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body
ng-app="ui.bootstrap.demo"
class="container">
<button
class="btn btn-danger"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Click me!</button>
<script type="text/ng-template"
id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data" />
<button class="btn btn-success"
ng-click="myPopover.close()">Close me!</button>
</script>
</body>
Original answer:
I spent the last two days on this problem, and finally came up with a simple enough hack. This goes on my controller:
$scope.close = function(e) {
el = angular.element(e.target).closest("td"); // `td` is the parent of my clickable
// element, in this case a `span`
$timeout(function() { // need $timeout so we don't conflict with the digest loop
el.children(":first").trigger('close'); // couldn't select the `span` element directly
});
},
Now we set up the close trigger on the provider:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'click': 'close', // Clicks now only open the tooltip, 'close' events close it.
});
}]);
And on my custom popover HTML template:
<button type="button"
class="btn btn-sm btn-success pull-right"
ng-click="close($event)">Close</button>
Voila! I can now close the popover through the button!
这篇关于角UI引导酥料饼 - 如何添加一个关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
