嵌套在指令元素中的uibCollapse不起作用，

Question

當我單擊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在這種情況下不起作用？

有任何想法嗎？

在這里

Answer 1

您需要解決兩件事：

1.更改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時，內容仍然顯示

plunker

嵌套在指令元素中的uibCollapse不起作用，

問題描述

1 個解決方案

解決方案1
0 已采納 2016-07-07 06:09:02

嵌套在指令元素中的uibCollapse不起作用，

問題描述

1 個解決方案

解決方案1 0 已采納 2016-07-07 06:09:02

解決方案1
0 已采納 2016-07-07 06:09:02