угловой пользовательский интерфейс DatePicker директива

Question

Я пытаюсь сделать директиву инкапсулировать и повторно использовать следующий угловой элемент щ:

<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: Я хотел бы видеть кого-то использовать это угловой щ 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.