首页 文章

动态设置AngularJS Directive元素的属性

提问于
浏览
1

我正在尝试在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 回答

  • 0

    你可以显示你的指令代码,如果指令的名称是myDirective,它应该是html中的my-Directive . 同时确保你在正确的元素,属性上使用restrict选项

  • 0

    我设法搞清楚了 . 我不确定为什么,但是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
            }
        };
    }]);
    

相关问题