Question

我试图在AngularJS中构建一个指令，该指令有一个可以包含其他AngularJS指令的模板。我的所有指令都需要一个＆＃34; id＆＃34;属性，所以我需要设置＆＃34; id＆＃34;在模板内的指令上。但是，无论我怎么做，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>。它最终被正确呈现，使用＆＃34; {{field.id}}＆＃34;替换为field.id的实际值。但是，一旦我尝试将我的指令应用于该div，或者将该指令用作元素本身，AngularJS就会发挥作用。我已经尝试了以下所有内容，并且所有结果都出现在上面的错误中，或者指令的ID设置为＆＃34; field.id＆＃34;而不是＆＃34; field.id＆＃34;的价值：

<!-- 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>

我也在指令中看到与其他属性相同的问题，因此它并不仅限于＆＃39; id＆＃39;属性。

指令的缩短版本抛出错误：

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。同时确保你在正确的元素上使用restrict选项，属性

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

动态设置AngularJS指令元素

2 个答案: