AngularJS ng-click 指令内的元素通常不可点击，或在元素外可点击

Question

我有一个简单的 AngularJS 指令，它可以在标题超过一定长度时收缩标题。收缩时，有一个小的人字形图标，可单击以显示完整标题。当显示完整的标题时，会显示另一个 V 形来收缩它。有时，第一个 V 形只能在图标本身上方约 10 像素处点击，而且通常 'contract' 图标将完全无法点击，即使它已显示。

指令：

(function(){
    'use strict';

    angular
        .module('main')
        .directive('headerTitle', headerTitle);

    function headerTitle() {
        return {
            restrict: 'E',
            scope: {
                brand: '=',
                generic: '=',
                suffix: '='
            },

            template: '{{ brand }} <span id="title-suffix" ng-class="{abbreviated:abbreviate}">{{ generic }} {{ suffix }}</span>' +
                    '<span ng-click="showFullTitle()" ng-show="abbreviate" class="expand-title"><i class="fa fa-chevron-right"></i></span>' +
                    '<span ng-click="contractTitle()" ng-show="contract" class="contract"><i class="fa fa-chevron-left"></i></span>',

            link: function(scope, elem, attrs, fn) {
                scope.generic = (scope.generic) ? '(' + scope.generic + ')' : '';
                scope.suffix = (scope.suffix) ? scope.suffix : '';
                scope.abbreviate = ((scope.brand.length + scope.generic.length + scope.suffix.length) > 35) ? true : false;

                scope.showFullTitle = function() {
                    scope.abbreviate = !scope.abbreviate;
                    scope.contract = true;
                }

                scope.contractTitle = function() {
                    scope.abbreviate = !scope.abbreviate;
                    scope.contract = false;
                }
            }
        };
    }


})();

HTML部分：

<div id="drugs-drugdetail" class="container">
    <div id="fullscreenonly" fullscreen="isFullScreen">
        <div class="panel panel-default">
            <div class="panel-heading report">
                <div class="h3 report-header">
                    <div id="drugdetail-report-header" class="title pull-left">
                        <header-title brand="Drug.aedrug_name" generic="Drug.aedrug_generic" suffix="TitleSuffix"></header-title>
                        <div class='drug-report-header-container'>
                            <div class='drug-report-data'>
                                <div class='primary-suspect-cases'>
                                <span class="header-label h4" id="drugdetail-cases-label">Primary Suspect Cases:</span>
                                <span class="h4" id="drugdetail-cases-value">{{ Metrics.counts.primary | number }}</span>
                                </div>
                                <div class='data-complete-through'>
                                <div class='drug-report-data'>
                                    <span class="header-label h4" id="drugdetail-date-label">Data Complete Through: <span class="h4" id="drugdetail-date-value"> {{ data_updated }}</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="drug-header-buttons">
                                <div class="header-button-padding">
                                    <button ng-click="goFullScreenViaWatcher()" class="btn btn-primary"><i class="fa aexicon-desktop"></i></button>
                                    <button ng-click="localStorageClearAll()" class="btn btn-primary reset-grid-button">Reset Grids</button>
                                    <span class="dropdown">
                                        <compare-menu categories="overviewData"></compare-menu>
                                    </span>
                       //redacted code for readability...

Answer 1

我发现一些遗留代码修改了 line-heights，然后与人字形重叠，使其可见但不可点击。我为 header 重写了 html 和 css，现在可以正常工作了。

AngularJS ng-click 指令内的元素通常不可点击，或在元素外可点击

AngularJS ng-click element within directive often unclickable, or clickable outside of element

javascript

angularjs

angularjs-ng-click

angular-directive