klikalna ikona bootstrap-datepicker z dyrektywą kątową

Question

Używam angularjs i chcę, aby mój bootstrap-datepicker był wyświetlany po kliknięciu w ikonę kalendarza.
Teraz jest tak:

<div class="input-append date datepicker"> 
    <input type="text" b-datepicker ng-model="date"/> 
    <span class="add-on" ><i class="icon-calendar"></i></span> 
</div> 

Gdzie b-datepicker jest dyrektywa zwyczaj. Kliknij w polu tekstowym pokazuje datepicker, ale kliknięcie ikony nie działa.
Oto źródła: http://jsfiddle.net/cPVDn/

moim celem jest być tak:
http://jsfiddle.net/6QnMB/

Doceniam jakiejkolwiek pomocy

UPDATE:
Oto rozwiązanie:
http://jsfiddle.net/cPVDn/53/

Answer 1

jestem delegowania rozwiązanie jako osobnej odpowiedzi.

Aby ikona kliknij pracę zamiast:

directive('bDatepicker', function() { 
return { 
    restrict: 'A', 
    link: function (scope, el, attr) { 
     el.datepicker(); 
    } 
    }; 
}) 

można było użyć czegoś takiego:

directive('bDatepicker', function() { 
return { 
    restrict: 'A', 
    link: function (scope, el, attr) { 
     el.datepicker({}); 
     var component = el.siblings('[data-toggle="datepicker"]'); 
     if (component.length) { 
      component.on('click', function() { 
       el.trigger('focus'); 
      }); 
     } 
    } 
    }; 
}) 

Oto pełna urywek z roztworem: http://jsfiddle.net/cPVDn/53/

Answer 2

Zobacz dobrą wtyczkę z AngularStrap, która rozwiąże Twój problem: link.

JS

.config(function($datepickerProvider) { 
    angular.extend($datepickerProvider.defaults, { 
    dateFormat: 'dd/MM/yyyy', 
    startWeek: 1 
    }); 
}) 

HTML

<input type="text" 
    class="form-control" 
    ng-model="selectedDateAsNumber" 
    data-date-format="yyyy-MM-dd" 
    data-date-type="number" 
    data-min-date="02/10/86" 
    data-max-date="today" 
    data-autoclose="1" 
    name="date2" 
    bs-datepicker> 

Zobacz demo Plunker

---

I jest ich main page

Answer 3

Na przykład w bootstrap documentation robią to trochę tak:

<div class="input-append date datepicker"> 
    <input type="text" is-open="opened" datepicker-popup ng-model="date"/> 
    <span class="add-on" ng-click="openAction($e)" ><i class="icon-calendar"></i></span> 
</div> 

a następnie w kontrolerze:

$scope.openAction = function ($event) { 

    $event.preventDefault(); 
    $event.stopPropagation(); 

    $scope.opened = !$scope.opened; 
}