Question

我有一个简单的AngularJS指令，如果标题超过一定长度，它会收缩标题。签约后，会有一个可点击的小V形图标显示完整标题。当显示完整标题时，显示另一个V形标记收缩它。偶尔第一个人字形只能在图标本身上方大约10个像素点击，而且通常是“合同”。即使显示图标，该图标也将完全无法取消。

指令：

(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

我发现一些遗留代码修改了行高，然后与人字形重叠，使其可见但不可点击。我重写了标题的html和css，现在它工作正常。

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

1 个答案: