angular-ui datepicker指令

Question

我正在尝试创建一个指令来封装和重用以下angular-ui元素：

<div class="input-group">
 <input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="mv.dateReviewed" is-open="statusDateReviewed.opened" ng-required="true" close-text="Close" />
 <span class="input-group-btn">
 <button type="button" class="btn btn-default" ng-click="openDateReviewed($event)"><i class="glyphicon glyphicon-calendar"></i> </button>
 </span>
</div>

令人惊讶的是，angular-ui组件被称为指令，但实际上是控制器(这里一定遗漏了一些东西)。

总而言之，我在一个表单上有5个，在我的应用程序的2个不同部分中，我希望能够做一些事情，比如

<date-picker data-format="dd/MM/yyyy" data-ng-model="oneWMS.dateReviewed" data-is-open="statusDateReviewed.opened" data-ng-click="openDateReviewed($event)"></date-picker> 

在我的指令中

angular.module('myApp').directive('datePicker',datePicker);

function datePicker() {
      return {
        restrict: 'AE',
        require: 'ngModel',
        scope: {
            format: '@format',
            ngModel: '@ngModel',
            isOpen: '@isOpen',
            ngClick: '@ngClick'

            },
        template: '<div class="input-group">' +
                 '<input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="oneWMS.dateReviewed" is-open="{{isOpen}}" ng-required="true" close-text="Close" />' +
                 '<span class="input-group-btn">' +
                 '<button type="button" class="btn btn-default" ng-click="{{ngClick}}"><i class="glyphicon glyphicon-calendar"></i> </button>' +
                 '</span>' +
             '</div>',
        link: function(scope, iElement, iAttrs) {
                // all the directive code
                console.log(iAttrs.format); // works
                console.log(iAttrs.ngModel); // works
                console.log(iAttrs.isOpen); // works
                console.log(iAttrs.ngClick); // works

该模板适用于该格式，但不适用于其他格式(ngModel、isOpen、ngClick)

我收到一条错误消息

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{isOpen}}] starting at [{isOpen}}].

有什么想法吗？

(PS:我希望看到有人使用angular-ui日期选择器作为一个指令，带有所有的格式...)

Answer 1

好的，它看起来可以使用：

scope: {
            format: '@',
            mod: '=ngModel',
            op: '=isOpen',
            cl: '=ngClick'

            },
        template: '<div class="input-group">' +
                 '<input type="text" class="form-control" datepicker-popup="{{format}}" data-ng-model="mod" is-open="op" ng-required="true" close-text="Close" />' +
                 '<span class="input-group-btn">' +
                 '<button type="button" class="btn btn-default" ng-click="cl"><i class="glyphicon glyphicon-calendar"></i> </button>' +
                 '</span>' +
             '</div>',

但是指令不起作用，我发布了a follow-up question来说明这一点。