在 AngularJS 指令元素上动态设置属性答案

【问题标题】：Dynamically setting attributes on an AngularJS Directive element在 AngularJS 指令元素上动态设置属性
【发布时间】：2015-11-17 17:02:07
【问题描述】：

我正在尝试在 AngularJS 中构建一个指令，该指令具有一个可以包含其他 AngularJS 指令的模板。我所有的指令都需要一个“id”属性，所以我需要在模板内的指令上设置“id”。但是，无论我怎么做，AngularJS 总是抛出这个错误：

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{field.id}}] starting at [{field.id}}].
http://errors.angularjs.org/1.4.6/$parse/syntax?p0=%7B&p1=invalid%20key&p2=2&p3=%7B%7Bfield.id%7D%7D&p4=%7Bfield.id%7D%7D
    at angular.js:68
    at Object.AST.throwError (angular.js:13010)
    at Object.AST.object (angular.js:12997)
    at Object.AST.primary (angular.js:12905)
    at Object.AST.unary (angular.js:12893)
    at Object.AST.multiplicative (angular.js:12880)
    at Object.AST.additive (angular.js:12871)
    at Object.AST.relational (angular.js:12862)
    at Object.AST.equality (angular.js:12853)
    at Object.AST.logicalAND (angular.js:12845)

我知道 AngularJS 可以做这样的事情：<div id="{{field.id}}">[...]</div>。它最终被正确渲染，“{{field.id}}”替换为 field.id 的实际值。但是，一旦我尝试将我的指令应用于该 div，或者将该指令用作元素本身，AngularJS 就会犹豫。我已经尝试了以下所有方法，所有结果都导致上述错误或指令的 ID 设置为“field.id”而不是“field.id”的值：

<!-- result in error shown above -->
<mydirective id="{{field.id}}"></mydirective>
<div mydirective id="{{field.id}}"></div>
<div class="mydirective" id="{{field.id}}"></div>
<mydirective ng-attr-id="{{field.id}}"></mydirective>
<div mydirective ng-attr-id="{{field.id}}"></div>
<div class="mydirective" ng-attr-id="{{field.id}}"></div>

<!-- result in id set to "field.id" -->
<mydirective id="field.id"></mydirective>
<div mydirective id="field.id"></div>
<div class="mydirective" id="field.id"></div>
<mydirective ng-attr-id="field.id"></mydirective>
<div mydirective ng-attr-id="field.id"></div>
<div class="mydirective" ng-attr-id="field.id"></div>

如果有帮助，带有模板的指令的总体布局如下所示：

<div ng-repeat="field in fields" ng-show="field.visible">
    <!-- some other stuff -->
    <mydirective ng-if="field.type == 'foobar'" id="{{field.id}}"></mydirective>
    <!-- some other stuff -->
</div>

我发现指令上的另一个属性也存在相同的问题，因此它不仅限于“id”属性。

引发错误的指令的缩短版本：

var application = angular.module('application', []);
application = application.directive('mydirective', ['$http', function($http){
    return {
        restrict: 'AEC',
        scope:{
            mydirectiveId: '=id',
            id : '@',
            // a few other attributes
        },
        templateUrl: 'mydirective.html',
        controller: function ($scope, $element){
            if($scope.id === undefined){
                console.error("The 'id' on mydirective is missing!");
            }

            // more logic... sorry can't post this
        }
    };
}]);

【问题讨论】：

当您使用id="field.id" 时，您还必须使用id : '='。

标签： javascript angularjs

【解决方案1】：

你能显示你的指令代码吗，如果你的指令名称是 myDirective，它应该是 html 中的 my-Directive。另外确保你在正确的元素上使用了限制选项，属性

【讨论】：

不幸的是，我无法分享很多东西；我正在使用的代码是专有的。该指令的名称为“mydirective”，全部小写；即使它抛出错误，它也试图显示指令，它只是由于错误而错误地这样做。 “mydirective”上的“restrict”选项通常设置为“E”，但我已将其更改为“AEC”以尝试使其正常工作。

【解决方案2】：

我设法弄明白了。我不完全确定为什么，但是 AngularJS 在“mydirective”上的隔离范围存在问题。当我从范围声明中删除 mydirectiveId: '=id' 属性时，它又开始按预期工作了。

父指令的工作 HTML 模板：

<div ng-repeat="field in fields" ng-show="field.visible">
    <!-- some other stuff -->
    <mydirective ng-if="field.type == 'foobar'" id="{{field.id}}"></mydirective>
    <!-- some other stuff -->
</div>

“mydirective”的工作指令代码：

application = application.directive('mydirective', ['$http', function($http){
    return {
        restrict: 'AEC',
        scope:{
            // mydirectiveId: '=id',       << removed this line, it was the problem
            id : '@',
            // a few other attributes
        },
        templateUrl: 'mydirective.html',
        controller: function ($scope, $element){
            if($scope.id === undefined){
                console.error("The 'id' on mydirective is missing!");
            }

            // more logic
        }
    };
}]);

【讨论】：