当我点击my-dir时,折叠的元素将不会展开。
我在.btn
类的css中设置了大小以确保实际点击事件。
// index.html
<body ng-controller="ctrl">
<p>{{hello}}</p>
<div class="btn" my-dir></div>
</body>
// 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
<div class="dir-box">
<div uib-collapse="isCollapsed">
<p>Hello World!</p>
<p>Nice to meet You!</p>
<p>: )</p>
</div>
</div>
为什么uibCollapse在这种情况下不起作用?
有什么想法吗?
答案 0 :(得分:0)
您需要解决两件事:
1.Change click
绑定到ng-click
。默认情况下,angular不会在jquery事件上运行$digest
周期。您可以在代码中添加$scope.$apply()
或$timeout
来解决此问题,但我建议您使用ng-click
作为更合适的方法。
<div class="btn" my-dir ng-click="isCollapsed = !isCollapsed"></div>
根据您的原始代码,我应该将其添加到您的指令模板中,但您的dir-box
位置不会与蓝色区域重叠......
2.在overflow:hidden
元素上使用uib-collapse
。
<div uib-collapse="isCollapsed" style="overflow: hidden;">
当父高为0时,内容仍然显示