如何使用指令的两部分属性名称?

时间:2014-09-10 09:14:58

标签: angularjs

我有一个指令:

app.directive("adminSelect", function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngChange: "&",
            ngModel: "=",
            options: "="
        },
        template: '<div><span>{{label}}</span><select id="{{id}}" ng-change="ngChange()" ng-model="ngModel" ng-options="item.id as item.name for item in options"></div>',
        controller: function ($scope, $element, $attrs) {
            $scope.label = $attrs.spanlabel;
            $scope.id = $attrs.selectid;
        }
    };
});

我这样称呼这个指令:

        <div data-admin-select
             spanlabel="ExamType"
             selectid="examTypeSelect"
             ng-change="ctrl.typeChanged(item)"
             ng-model="ctrl.configService.admin.examTypeId"
             options="ctrl.examType.dataPlus"></div>

属性名称spanlabel和selectid并不是我想要的。我可以将它们分成两个部分名称,例如span-label,如果不是spanLabel。如果是的话那我怎么能这样做?

1 个答案:

答案 0 :(得分:0)

http://jsbin.com/tugej/1/edit

HTML

<div data-admin-select
             span-label="ExamType"
             select-id="examTypeSelect"
             ng-change="ctrl.typeChanged(item)"
             ng-model="ctrl.configService.admin.examTypeId"
             options="ctrl.examType.dataPlus">
</div>

JS:

 var app = angular.module('app', []);
    app.directive("adminSelect", function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                ngChange: "&",
                ngModel: "=",
                options: "="
            },
            template: '<div><span>{{label}}</span><select id="{{id}}" ng-change="ngChange()" ng-model="ngModel" ng-options="item.id as item.name for item in options"></div>',
            controller: function ($scope, $element, $attrs) {
                $scope.label = $attrs.spanLabel;
                $scope.id = $attrs.selectId;
            }
        };
    });
    app.controller('firstCtrl', function($scope){




    })