角UI引导 - 显示日期选择器按钮点击无功能 [英] Angular UI Bootstrap - Datepicker show on button click without function

问题描述

我想表明从href=\"http://angular-ui.github.io/bootstrap/\" rel=\"nofollow\">的库时之一以下事件occours：

• 用户点击输入​​框


• 在日历图标，用户点击

我知道这是可以通过点击按钮比如上例中的这里

我的问题是：是否真的有必要创建一个控制器/范围方法来显示日期选择器

？

下面的例子显示了我的code：

\r

\r

angular.module（MyModule的，[ui.bootstrap]）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;脚本的src =// maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js\"></script>\r
＆LT;链接HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js\"></script>\r
\r
＆LT; D​​IV NG-应用=MyModule的＆GT;\r
  ＆LT; D​​IV CLASS =表单组＆GT;\r
    ＆LT;标签=出生日期级=控制标签COL-SM-4＆GT;出生日期＆LT; /标签＆gt;\r
    ＆LT; D​​IV CLASS =COL-SM-6＆GT;\r
      ＆LT; p =类输入组＆GT;\r
        ＆LT;输入\r
               TYPE =文本\r
               类=表格控\r
               ID =出生日期\r
               NG-模式=NewEmployee.BirthDate\r
               日期选择器，弹出=DD.MM.YYYY\r
               是开=开张\r
               NG-点击=开业=真正的＆GT;\r
        ＆LT;跨度类=输入组BTN＆GT;\r
          ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=开业=真正的＆GT;\r
            ＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;\r
          ＆LT; /按钮＆GT;\r
        ＆LT; / SPAN＆GT;\r
      ＆所述; / P＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
 ＆LT; / DIV＆GT;

\r

\r

\r

解决方案

我发现，这是可能的prevent的NG-点击code这样的内事件传播：

\r

\r

angular.module（MyModule的，[ui.bootstrap]）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/jquery/2.1.1/jquery.min.js\"></script>\r
＆LT;脚本的src =// maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js\"></script>\r
＆LT;链接HREF =// maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css的rel =stylesheet属性/＆GT;\r
＆所述; SCRIPT SRC =htt​​ps://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js＆GT;＆下; /脚本＆GT;\r
＆LT;脚本src=\"//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js\"></script>\r
\r
＆LT; D​​IV NG-应用=MyModule的＆GT;\r
  ＆LT; D​​IV CLASS =表单组＆GT;\r
    ＆LT;标签=出生日期级=控制标签COL-SM-4＆GT;出生日期＆LT; /标签＆gt;\r
    ＆LT; D​​IV CLASS =COL-SM-6＆GT;\r
      ＆LT; p =类输入组＆GT;\r
        ＆LT;输入\r
               TYPE =文本\r
               类=表格控\r
               ID =出生日期\r
               NG-模式=NewEmployee.BirthDate\r
               日期选择器，弹出=DD.MM.YYYY\r
               是开=开张\r
               NG-点击=开业=真正的＆GT;\r
        ＆LT;跨度类=输入组BTN＆GT;\r
          ＆LT;按钮式=按钮级=BTN BTN-默认的NG点击=开业= TRUE; $ event.stopPropagation（）;＆GT;\r
            ＆LT; I类=glyphicon glyphicon日历＆GT;＆LT; / I＆GT;\r
          ＆LT; /按钮＆GT;\r
        ＆LT; / SPAN＆GT;\r
      ＆所述; / P＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
 ＆LT; / DIV＆GT;

\r

\r

\r

I want to show the datepicker from the angular ui bootstrap library when one of the following events occours:

• User clicks in input box
• User clicks on calendar icon

I know that it is possible to do this by calling an controller function when the button is clicked like in the example here

My question is: Is it really necessary to create a controller/scope method to show the datepicker?

The following example shows my code:

angular.module("MyModule", ["ui.bootstrap"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

<div ng-app="MyModule">
  <div class="form-group">
    <label for="BirthDate" class="control-label col-sm-4">BirthDate</label>
    <div class="col-sm-6">
      <p class="input-group">
        <input 
               type="text" 
               class="form-control" 
               id="BirthDate" 
               ng-model="NewEmployee.BirthDate" 
               datepicker-popup="dd.MM.yyyy" 
               is-open="Opened" 
               ng-click="Opened=true">
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="Opened=true">
            <i class="glyphicon glyphicon-calendar"></i>
          </button>
        </span>
      </p>
    </div>
  </div>
 </div>

解决方案

I found out that it is possible to prevent the event propagation within the ng-click code like this:

angular.module("MyModule", ["ui.bootstrap"]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

<div ng-app="MyModule">
  <div class="form-group">
    <label for="BirthDate" class="control-label col-sm-4">BirthDate</label>
    <div class="col-sm-6">
      <p class="input-group">
        <input 
               type="text" 
               class="form-control" 
               id="BirthDate" 
               ng-model="NewEmployee.BirthDate" 
               datepicker-popup="dd.MM.yyyy" 
               is-open="Opened" 
               ng-click="Opened=true">
        <span class="input-group-btn">
          <button type="button" class="btn btn-default" ng-click="Opened=true;$event.stopPropagation();">
            <i class="glyphicon glyphicon-calendar"></i>
          </button>
        </span>
      </p>
    </div>
  </div>
 </div>

这篇关于角UI引导 - 显示日期选择器按钮点击无功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！