在AngularJS指令元素上動態設置屬性

Question

我正在嘗試在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
        }
    };
}]);

Answer 1

您可以顯示指令代碼嗎，如果指令的名稱是myDirective，則它在html中應該是my-Directive。還要確保您在正確的元素上使用了strict選項，屬性

Answer 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
        }
    };
}]);