javascript - AngularJS 在变量写入 for 属性后添加的空白

Question

我正在与神秘的 Angular 功能(或错误，我不知道)作斗争。我有一个标签和一个由不同指令编写的输入，因此，为了通过 id/for 属性绑定(bind)它们，我将 id 值作为 @ 变量传递给标签范围。问题在于 Angular 在 for 属性中的变量之后添加了一个空格，因此连接不起作用。我在链接和模板中打印变量，以确保变量中没有意外的空格并且结果是正确的(变量中没有空格)。

检查代码。

这是指令:

(function() {
'use strict';

angular
    .module('egeo.forms')
    .directive('egeoCLabel', egeoCLabel);

egeoCLabel.$inject = ['EgeoConfig'];

function egeoCLabel(EgeoConfig) {
    var directive = {
        link: link,
        replace: true,
        restrict: 'E',
        scope: {
            for: '@',
            hasHelp: '=',
            id: '@',
            label: '@',
            isHelpShown: '=',
            required: '@'
        },
        templateUrl: EgeoConfig.getEgeoPath() + '/components/label/components.label.tpl.html'
    };

    return directive;

    function link(scope, element, attrs, ctrl) {
        scope.toggleHelp = function() {
            scope.isHelpShown = !scope.isHelpShown;
        }         
    }
}
})();

这是模板:

<label for="{{for}}" class="egeo-c-label" ng-show="{{(label != null)}}">
{{label}}

<span class="egeo-c-label__optional-mark" data-ng-if="!required"></span>

<i class="egeo-c-icon icon-help2" data-ng-if="hasHelp" data-ng-click="toggleHelp()">
</i>
</label>

渲染后的结果是:

<label for="username " class="egeo-c-label ng-binding ng-isolate-scope" ng-show="true" data-label="username" data-required="true" data-is-help-shown="vm.isHelpShown" data-has-help="vm.hasHelp">
username

<!-- ngIf: !required -->

<!-- ngIf: hasHelp --><i class="egeo-c-icon icon-help2 ng-scope" data-ng-if="hasHelp" data-ng-click="toggleHelp()">
</i><!-- end ngIf: hasHelp -->

我不知道为什么，Angular 会在 for 属性后面添加一个空格，尽管它在变量值中不存在。

Answer 1

我遇到了同样的问题并通过重命名我的隔离范围属性解决了它。看起来像是命名冲突问题。

将您的隔离范围定义更改为:

scope: {
  myFor: '@'
}

传递数据给它:

<egeo-c-label data-my-for="{{id}}"> 

在你的指令中使用它:

<label for="{{myFor}}">