директива angular-ui datepicker

0

Я пытаюсь сделать директиву для инкапсуляции и повторного использования следующего элемента углового 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>

Удивлены, что компоненты углового ui называются директивами, но на самом деле являются контроллерами (здесь должно быть что-то отсутствует).

Подводя итог, у меня есть 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: Мне очень хотелось бы, чтобы кто-то использовал этот угловой ui datepicker в качестве директивы, со всем форматированием...)

Теги:
datepicker

1 ответ

0

Ок, похоже, работает с:

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>',

Но директива не работает, я публикую для нее следующий вопрос.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню