Question

我试图制定一个指令来封装和重用以下的angular-ui元素：

<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-ui组件被称为指令，但实际上是控制器（这里必须遗漏一些东西）。

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

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

在我的指示中

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

该模板适用于该格式，但与其他任何内容（ngModel，isOpen，ngClick）打破

我收到错误消息

<xsl:output method="html" />

有什么想法吗？

（PS：我很乐意看到有人使用angular-ui datepicker作为指令，所有格式都是......）

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。

angular-ui datepicker指令

1 个答案: