带有角度指令的可点击bootstrap-datepicker图标

Question

我正在使用angularjs,我想在点击日历图标后显示我的bootstrap-datepicker.
现在它是这样的:

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

b-datepicker自定义指令在哪里.单击文本字段显示datepicker,但图标单击不起作用.
这里有消息来源:http://jsfiddle.net/cPVDn/

我的目标是这样:http:
//jsfiddle.net/6QnMB/

我感谢任何帮助

更新:
这是解决方案:http:
//jsfiddle.net/cPVDn/53/

Answer 1

我将解决方案作为单独的答案发布。

要使图标单击起作用，而不是：

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

人们可以使用类似的东西：

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');
            });
        }
    }
  };
})

这是包含解决方案的完整片段： http://jsfiddle.net/cPVDn/53/