angular-ui 日期选择器指令答案

【问题标题】：angular-ui datepicker directiveangular-ui 日期选择器指令
【发布时间】：2015-09-28 02:39:21
【问题描述】：

我正在尝试制定一个指令来封装和重用以下 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 组件被称为指令，但实际上是控制器（这里肯定缺少一些东西）。

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

<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 日期选择器作为指令，以及所有的格式......）

【问题讨论】：

标签： angularjs datepicker

【解决方案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。

【讨论】：