Question

我正在与一个神秘的角色特征（或者我不知道的bug）战斗。我有一个标签和一个由不同指令编写的输入，因此，为了通过id / for属性绑定它们，我将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}}">

AngularJS在变量写入for属性后添加的空格

1 个答案: