Javascript 点击引导图标时AngularJS和jQuery日历指令是否有效？_Javascript_Jquery_Angularjs_Twitter Bootstrap_Angularjs Directive

Javascript 点击引导图标时AngularJS和jQuery日历指令是否有效？

javascript jquery angularjs twitter-bootstrap

Javascript 点击引导图标时AngularJS和jQuery日历指令是否有效？,javascript,jquery,angularjs,twitter-bootstrap,angularjs-directive,Javascript,Jquery,Angularjs,Twitter Bootstrap,Angularjs Directive,到目前为止，我已经使用AngularJS和jQuery为我的日历创建了一个指令。当用户选择输入框时，jQuery的日期选择器将弹出。我也在尝试这样做，这样用户就可以点击Bootstrap的“glyphicon glyphicon calendar”来弹出jQuery的日期选择器。我现在陷入困境，不知道该怎么办。我已经创建了一个JSFIDLE，所以你们可以理解我的意思以下是代码示例： <div ng-app="App"> <div class="input-group"

到目前为止，我已经使用AngularJS和jQuery为我的日历创建了一个指令。当用户选择输入框时，jQuery的日期选择器将弹出。我也在尝试这样做，这样用户就可以点击Bootstrap的“glyphicon glyphicon calendar”来弹出jQuery的日期选择器。我现在陷入困境，不知道该怎么办。我已经创建了一个JSFIDLE，所以你们可以理解我的意思

以下是代码示例：

<div ng-app="App">
   <div class="input-group"> 
     <span class="input-group-addon">
       <span class="glyphicon glyphicon-calendar"></span>
     </span>
     <input type="text" name="startDate" calendar ng-model="startDate" class="form-control" placeholder="mm/dd/yyyy" ng-minlength="10"></input>
   </div>
 </div>



  var app = angular.module('App', [])
  app.directive('calendar', function () {
      return {
             require: 'ngModel',
             link: function (scope, el, attr, ngModel) {
              $(el).datepicker({
                  minDate: 0,
                  dateFormat: 'MM d, yy',
                  onSelect: function (dateText) {
                      scope.$apply(function () {
                          ngModel.$setViewValue(dateText);
                      });
                  }
              });
          }
      };
  })


var app=angular.module（'app'，[]）
应用程序指令（'日历'，函数（）{
返回{
要求：'ngModel'，
链接：功能（范围、el、属性、ngModel）{
$（el）.日期选择器({
minDate:0，
日期格式：“MM d，yy”，
onSelect:函数（日期文本）{
作用域：$apply（函数（）{
ngModel.$setViewValue（日期文本）；
});
}
});
}
};
})

以下基于您的小提琴的示例。它添加了一个数据属性，该属性驱动对JQuerysShow方法的调用。为了简洁起见，我刚刚将“show”值挂在$rootScope上。您不希望在最终代码中这样做

这种数据属性驱动的函数映射适用于以二进制方式运行的任何函数或函数集，开-关，显示隐藏等

普朗克的例子


Show={{Show}
元素（文档）.ready（函数（）{
var-app=angular.module（'app'，[]）；
应用程序指令（'calendar2'，函数（）{
返回{
要求：'ngModel'，
链接：功能（范围、el、属性、ngModel）{
属性$观察（“显示”，功能（val）{
如果（val='true'）{
$（el）.日期选择器（“显示”）；
}
否则{
$（el.datepicker（“隐藏”）；
}
});
$（el）.日期选择器({
minDate:0，
日期格式：“MM d，yy”，
onSelect:函数（日期文本）{
作用域：$apply（函数（）{
ngModel.$setViewValue（日期文本）；
});
}
});
}
};
});
引导（文档，[“应用程序]）；
});

如果您不希望将glyphicon作为指令模板的一部分，则可以向指令添加一个属性，该属性将强制JQuery日历显示。在指令中使用attr.observe进行观察，并在glyhpicon上进行修改。感谢您的帮助，mccainz！我很感激。然而，我尝试在JSFIDLE上复制和粘贴代码，但似乎无法使其正常工作。下面是更新的JSFIDLE及其代码：更新了脚本以匹配一个正在工作的plunker，它演示了我描述的方法。最后，根据您的原始示例制作一把小提琴。非常感谢你，麦卡因茨！我能看见小提琴在工作。但是，在使用show toggle方法打开和关闭日期选择器时，我遇到了一个问题。当我点击glyphicon，{{show}}返回true，日期选择器显示，这很好。但是，当我决定通过单击外部的任意位置来关闭日期选择器时，{{show}仍然是正确的。因此，如果我想再次显示datepicker，我必须单击Glyph图标两次。当用户通过单击外部关闭日期选择器时，是否有方法使{{show}}也返回false？

<body>
<button ng-click="show=!show">Show={{show}}</button>
<input data-show="{{show}}" 
       type="text" 
       name="startDate" 
       calendar2 
       ng-model="startDate" 
       class="form-control" 
       placeholder="mm/dd/yyyy" 
       ng-minlength="10"></input>

<script>

angular.element(document).ready(function(){

    var app = angular.module('app', []);

    app.directive('calendar2', function () {
      return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {

            attr.$observe("show",function(val){
                if(val=='true'){
                    $(el).datepicker( "show" );
                }
                else{
                    $(el).datepicker( "hide" );
                }
            });

            $(el).datepicker({
                minDate: 0,
                dateFormat: 'MM d, yy',
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
              });
            }
          };
        });

    angular.bootstrap(document,["app"]);
});
</script>