[英]uibCollapse nested in an directive element won't work,
When I click my-dir, collapsed elements won't expand. 当我单击my-dir时,折叠的元素将不会展开。 I have set size in css for .btn
class to ensure actually click event. 我在.btn
类的css中设置了大小以确保实际点击事件。
// index.html // index.html
<body ng-controller="ctrl">
<p>{{hello}}</p>
<div class="btn" my-dir></div>
</body>
// app.js // app.js
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ctrl', function($scope){
$scope.hello = 'hello';
});
app.directive('myDir', function() {
return {
restrict: 'A',
replace: false,
templateUrl: './tmpl.html',
link: function (scope, element, attrs) {
scope.isCollapsed = true;
element.bind('click', function (e) {
scope.isCollapsed = !scope.isCollapsed;
})
}
};
});
// tmpl.html // tmpl.html
<div class="dir-box">
<div uib-collapse="isCollapsed">
<p>Hello World!</p>
<p>Nice to meet You!</p>
<p>: )</p>
</div>
</div>
Why uibCollapse does not work in this situation ? 为什么uibCollapse在这种情况下不起作用?
Any ideas ? 有任何想法吗 ?
There are 2 things that you need to fix: 您需要解决两件事:
1.Change click
binding to ng-click
. 1.更改click
绑定到ng-click
。 By default angular does not run its $digest
cycle on jquery events. 默认情况下,angular不会在jquery事件上运行其$digest
循环。 You can fix that by adding $scope.$apply()
or $timeout
in your code, but I recommend using ng-click
as a more proper way. 您可以通过在代码中添加$scope.$apply()
或$timeout
来解决此问题,但我建议使用ng-click
作为更合适的方法。
<div class="btn" my-dir ng-click="isCollapsed = !isCollapsed"></div>
By your original code I should add it inside your directive template, but your dir-box
position does not overlap with the blue area... 根据您的原始代码,我应该将它添加到您的指令模板中,但您的dir-box
位置不会与蓝色区域重叠...
2.Use overflow:hidden
on uib-collapse
element. 2.使用overflow:hidden
在uib-collapse
元素上。
<div uib-collapse="isCollapsed" style="overflow: hidden;">
The contents were still showing when the parent height is 0 当父高度为0时,内容仍然显示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.