angular-ui-bootstrap中,setTriggers无效
2018-03-01 15:17
330 查看
皆大欢喜,研究了一天的bug,楼主终于解决了。
与angular相对应的ui插件,angular-ui-bootstrap,使用非常顺手,代码简洁且异动,但一些拓展功能,有时很让人费解。比如,楼主遇到的想设置冒泡片段可以自行控制其关闭。官方例子:
<h4>Triggers</h4> <p> <button uib-popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button> </p>
楼主同样的设置:
<h4>Triggers</h4> <p> <button uib-popover="I appeared on mouse enter!" popover-trigger="openTrigger" type="button" class="btn btn-default">Mouseenter</button> </p> <button ng-click="runmef('openTrigger')">Show</button> <button ng-click="runmef('closeTrigger')">Hide</button>
但点击两个按钮无效果啊,还是按照其默认方式:点击打开,再次点击关闭。楼主已头大了一个昨天。。。
js是统一的,如下:
var app = angular.module('plunker', ['ui.bootstrap']) .config(['$uibTooltipProvider', function($uibTooltipProvider) { $uibTooltipProvider.setTriggers({ 'open': 'close' }); }]); app.controller('MainCtrl', function($scope) { $scope.runmef = function(eventName) { $("#myid").trigger(eventName); } });
查阅angular-ui-bootstrap的源代码后,发现了问题,在执行红框中的语句时,出现了分歧:
如果popover-trigger=”open”,其返回的结果是undefined,然后执行到后面就按照其默认的click方式来处理冒泡的出现方式;
如果popover-trigger=“‘open’”,其返回的结果是’open’(字符串),然后传递值完全正常;
至此,问题解决。
那么,在angular中,$eval这个方法,来测试一下:
var a = $scope.$eval('open'); //它等同于$scope.$eval(open) undefined var b = $scope.$eval("'open'"); //open var c = $scope.$eval(3333); //undefined
原因不知
相关文章推荐
- AngularJS ui.bootstrap.pagination 分页
- angularjs ui.bootstrap.pagination分页简单使用
- AngularJS ui.bootstrap.alert 消息
- angular下自动补全控件ui.bootstrap.typeahead
- Angular UI ngx-bootstrap 使用说明
- Angular-UI Bootstrap组件实现警报功能
- angular-ui-bootstrap (1)
- 使用angularjs ui-bootstrap遇到的问题
- UIBootatrap:是由AngularJS UI团队编写的纯AngularJS实现的Bootstrap组件
- 浅谈angular-ui-bootstrap-modal这个骚东西
- angular-ui/bootstrap
- angular Tabs (ui.bootstrap.tabs)
- AngularJS ui.bootstrap.alert 消息
- angularjs+bootstrap+SpringMVC+Spring+mybatis+maven--ui.router路由一
- bootstrap2 升级到bootstrap3 分页pagination 与Angular UI 不兼容
- angular-ui-bootstrap 日历控件国际化
- AngularJS ui.bootstrap.tabs
- AngularJS+ui.bootstrap实现图片轮播
- bootstrap和angular-ui-bootstrap(popover之差)
- 详解Angular-ui-BootStrap组件的解释以及使用