角UI日期選擇器指令

Question

我試圖做一個指令來封裝和重用下角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：我很想看到有人使用角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。