如何将无法点击的内容添加到 angular bootstrap 手风琴 header 中？

Question

accordion-heading 中的默认内容都可以点击以切换该部分，但现在我需要在 header 中添加一些不可点击的内容。怎么做到的？

<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，您可以使用 class accordion-toggle 和 re-enable 从 anchor-tag 禁用 pointer-events 您的 Toggle Me 文字。有点棘手。

您可以尝试的另一件事是将 templateCache 修改为 template/accordion/accordion-group.html 并根据需要设置样式。这可能更好，但我还没有尝试过。

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

css 方法有一些不完美的地方，我不确定如何解决它们：

切换我点击将为整个标题加下划线
link 的活动样式和悬停将使不可点击文本的下划线保持活动状态。

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

更新:

在 angular-ui-bootstrap 的主存储库中，您可以将 template-url 传递给 accordion-group 以使用您的自定义模板。这是一个非常新的承诺。 See here。最新版本0.13.2是with-out那个功能，但是你可以修改模板，但是不太方便。

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

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

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;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <accordion close-others="oneAtATime">
    <accordion-group is-open="destination.openState" ng-repeat="destination in mileage.destionations" is-disabled="false">
        <accordion-heading>
            <span class="accordionSubtitle">toggle me </span> - {{destination.total}} this text is not clickable<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </accordion-heading>
      {{destination|json}}
    </accordion-group>
  </accordion>
    <button ng-click="addNewDestination()">add</button>
</div>

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。第一个指令将执行在其点击功能中分配给它的任何任务。第二个指令将导致元素吞下发生在它或其子项上的任何单击，除非子项具有在事件传递给父项之前调用的单击事件。

Answer 3

改进@AWolf的回答：你也可以在ng-click中使用$event.stopPropagation()位于 accordion-heading 标签中。

这允许您在需要时在文本上分配另一个事件（这是我的情况 - 添加 "edit" 图标而不是简单的文本）。

在此处查看更新的示例：

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
    };
}

.not_clickable:hover{
  cursor: default;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.2/ui-bootstrap-tpls.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <accordion close-others="oneAtATime">
    <accordion-group is-open="destination.openState" ng-repeat="destination in mileage.destionations" is-disabled="false">
        <accordion-heading>
            <span class="accordionSubtitle">toggle me</span>
            <span ng-click="$event.stopPropagation()" class="not_clickable"> - {{destination.total}} this text is not clickable<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
           </span>
        </accordion-heading>
      {{destination|json}}
    </accordion-group>
  </accordion>
    <button ng-click="addNewDestination()">add</button>
</div>

如何将无法点击的内容添加到 angular bootstrap 手风琴 header 中？

How to add unclickable content into angular bootstrap accordion header?

angularjs

angular-ui-bootstrap