Question

你可以在this page I am developing.看到问题它出现在人物胜和生之后。我不明白这个额外的空间角色来自何处或如何消除它。任何帮助表示赞赏。

'use strict';

var app = angular.module("readerApp", ['ui.bootstrap', 'ngAnimate']);


app.controller('ReaderCtrl', function ($scope) {
    $scope.knownKanji = 0;
    $scope.definition = "";

    $scope.dictionary = {
        '生きる': {
            meaning: 'To live',
            sample: '生きる意味を教えてくれ。',
            kanji: {
                '生' : 'live'
            }
        },
        '勝つ': {
            meaning: 'To win',
            sample: '明日は勝てないかもしれない。',
            kanji: {
                '勝': 'win'
            }
        }
    };

    $scope.$on('kanjiUp', function(event, data) {
        $scope.knownKanji += 1;
    });

    $scope.$on('kanjiDown', function(event, data) {
        $scope.knownKanji -= 1;
    });

    $scope.$on('setDefinition', function(event, data) {
        $scope.definition = $scope.dictionary[data];
        console.log($scope.definition);
    });

}).directive('kanji', function() {
    return {
        transclude: true,
        restrict: 'E',
        templateUrl: 'static/js/kanji.html',
        scope: true,
        controller: function($scope, $transclude, $element) {
        },
        link: function(scope, element, attrs, ctrl, transclude) {
            scope.reading = attrs['reading'];

            var clickingCallback = function() {
                if (scope.reading=='') {
                    scope.reading = attrs['reading'];
                    scope.$emit('kanjiDown');
                }
                else {
                    scope.reading='';
                    scope.$emit('kanjiUp');
                }
                scope.$apply();
            };
            element.bind('click', clickingCallback);
        }
    };
}).directive('line', function() {
    return {
        transclude: true,
        restrict: 'E',
        templateUrl: 'static/js/line.html',
        controller: function($scope, $transclude, $element) {
            $scope.isCollapsed = true;
        },
        link: function(scope, element, attrs, ctrl, transclude) {
            scope.translation = attrs['translation'];
        }
    };
}).directive('word', function() {
    return {
        transclude: true,
        restrict: 'E',
        templateUrl: 'static/js/word.html',
        controller: function($scope, $transclude, $element) {

        },
        link: function(scope, element, attrs, ctrl, transclude) {
            element.bind('click', function(e) {
                var el = element.clone();
                var elementClone = el[0];
                el.find('rt').remove();
                var word = el.text().replace(/(\r\n|\n|\r)/gm,"");
                scope.$emit('setDefinition', word);
            });
        }
    };
});

line.html

<div class="line">
    <p>
        <span ng-transclude></span>
    </p>
    <i class="glyphicon"
       ng-click="isCollapsed = !isCollapsed"
       ng-class="{'glyphicon-chevron-up': !isCollapsed, 'glyphicon-chevron-down': isCollapsed}">
        翻訳
    </i>
    <div uib-collapse="isCollapsed">
            <div class="well well-sm">{{translation}}</div>
    </div>

word.html

<span ng-transclude></span>

kanji.html

<ruby><span ng-transclude></span><rt>{{reading}}</rt></ruby>

Answer 1

在链接页面上，没有额外的空格字符。 ~~可见间隙由使用的字体创建。您可以尝试使用CSS规则来消除额外的空间，例如kanji {margin-right: -12px;}。~~。

正如@Claies在评论中指出的那样，额外的空间是由指令的span元素产生的。该指令需要与replace: true共同配置以删除指令元素。有关详细信息，请参阅the AngularJS documentation for $compile。

AngularJS指令是添加一个额外的空白字符，我该如何删除它？

1 个答案: