我正在尝试在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的实际值 . 但是,一旦我尝试将我的指令应用于该div,或者将该指令用作元素本身,AngularJS就会发挥作用 . 我've tried all of the following and all result either in the error above or with the directive'的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
}
};
}]);
2 回答
你可以显示你的指令代码,如果指令的名称是myDirective,它应该是html中的my-Directive . 同时确保你在正确的元素,属性上使用restrict选项
我设法搞清楚了 . 我不确定为什么,但是AngularJS在"mydirective"上遇到了隔离范围的问题 . 当我从范围声明中删除
mydirectiveId: '=id'
属性时,它按预期再次开始工作 .为父指令使用HTML模板:
“mydirective”的工作指令代码: