Question

手风琴标题中的默认内容将全部可点击以切换该部分，但现在我需要在标题中添加其他不可点击的内容。怎么办？

<accordion-group is-open="OpenOneAtTime" ng-repeat="destination in mileage.destionations" style='position:relative;'>
    <accordion-heading>
        <!-- All I want is only make "Toggle Me" clickable, and leave other content in the header alone,just like pure text. -->
        <span ng-class="{'fa-chevron-down': OpenOneAtTime, 'fa-chevron-right': !OpenOneAtTime}">Toggle Me</span>
        <span ng-show='!OpenOneAtTime'>{{destination.Total}}+{{destination.To}}</span>
    </accordion-heading>
    <div class='accordion-section'>
        main content
    </div>
    <div class='clear'></div>
</accordion-group>

Answer 1

这并不容易。我没有看到angular-ui-bootstrap方面的任何选项来改变这一点。

但是使用CSS，您可以使用类accordion-toggle从锚标记中停用pointer-events，然后重新启用Toggle Me文本的事件。这有点棘手。

您可以尝试的另一件事是修改templateCache的{{1}}并根据需要设置样式。这可能更好，但我还没有尝试过。

应该可以在运行时更改该模板以进行自定义覆盖。如果没有，你可以修改模板的源文件并进行调整，但我会先尝试一下，如果你能以某种方式覆盖它。

有些观点认为css方法并不完美，我不确定如何修复它们：

切换我点击将在整个标题下划线
活动样式并从链接悬停将使不可点击文本的下划线保持活动状态。

请查看下面的演示或此jsfiddle。

<强>更新：

在template/accordion/accordion-group.html的主回购中，您可以将angular-ui-bootstrap传递到template-url以使用自定义模板。这是一个非常新的提交。 See here。最新版本accordion-group没有该功能，但您仍然可以修改模板，但不太方便。

我现在会使用模板方法，因为它更干净。如果您必须使用范围变量修改模板内的0.13.2文本，则可能需要检查是否可以修饰accordion-group指令以添加该行为。

我使用自定义手风琴模板创建了另一个jsfiddle。

Toggle Me!

angular.module('demoApp', ['ui.bootstrap'])
    .controller('mainController', MainController);

function MainController($scope) {
    var itemCount = 0; // just to have an increasing title
    $scope.oneAtATime = true;
    $scope.mileage = {};
    $scope.mileage.destionations = [{
        Type: '',
        Reimbursable: "Yes",
        Distance: true,
        Odometer: false,
        total: itemCount,
        From: '',
        To: '',
        openState: true
    }];
    $scope.addNewDestination = function () {
        var index = $scope.mileage.destionations.length,
            openState = (index == 1);
        
        angular.forEach($scope.mileage.destionations, function(destination, index) {
            // turn all of except second
            destination.openState = (index == 1);
        });
        
        itemCount++;
        
        var newDestination = {
            type: '',
            reimbursable: "Yes",
            Distance: true,
            Odometer: false,
            total: itemCount,
            From: '',
            To: '',
            openState: openState
        };
        
        
        $scope.mileage.destionations.push(newDestination);
    }
    $scope.status = {
        isFirstOpen: true,
        isFirstDisabled: false
    };
}

.accordion-toggle {
    display: inline-block;
    /*cursor: default;
    */
    pointer-events: none;
}
.accordionSubtitle {
    display: inline-block;
    /*cursor: default;
    */
    pointer-events: auto;
}

.accordionSubtitle:hover{
    text-decoration: underline;
}

Answer 2

如果了解事件传播以及如何使用它，这是一个简单的解决方法。你需要两个指令。让我们称它们为可点击且无法点击。

.directive('clickable', function ()  {
    return {
        restrict: 'A', 
        link: function (scope, element, attrs) {
            element.bind('click', function ()  {
                 //Do something here
            });
        }
    };
});

.directive('unClickable', function ()  {
    return {
        restrict: 'A', 
        link: function (scope, element, attrs) {
            element.bind('click', function (e)  {
                  e.stopPropogation();
            });
        }
    };
});

事件从执行或触发它们的元素开始，然后通过DOM向上进行。第一个指令将执行在其click函数中分配的任何任务。第二个指令将导致元素吞下在其或其子节点上发生的任何单击，除非子节点在事件传递给父节点之前调用了click事件。

如何将不可点击的内容添加到角度引导手风琴标题？

2 个答案: