使用按钮角度

Question

我有一个输入字段附加了Angular UI datepicker。 在此之下，我添加了2个按钮来更改日期，“日复一日”。

这是输入部分（在我的页面之后）：

<p class="input-group">
    <span class="input-group-addon hidden-xs">From</span>
    <input type="text" class="form-control text-center" datepicker-popup="{{format}}" ng-model="parent.dtFrom"   ng-change="refresh(0)" show-button-bar="false" is-open="opened1" max-date="maxDate" datepicker-options="dateOptions" ng-required="true" close-text="Close" readonly />
    <span class="input-group-btn">
        <button type="button" class="btn btn-default" ng-click="open($event, 'opened1')"><i class="glyphicon glyphicon-calendar"></i></button>
    </span>
</p>

以下是我改变它的按钮：

 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 btn-group" role="group" >
   <div class="text-center" >
     <button type="button" class="btn btn-default btn-outline glyphicon glyphicon-chevron-left text-center previousdate" ng-click="addDayFrom(-1)"></button>
     <button type="button" class="btn btn-default btn-outline glyphicon glyphicon-home text-center todaydate"  ng-click="DateFromToday()"></button>
     <button type="button" class="btn btn-default btn-outline glyphicon glyphicon-chevron-right text-center nextdate" ng-click="addDayFrom(1)" ng-show="parent.dtFrom < todate" ></button>
   </div>
 </div>

以下是我在控制器开始时启动dtFrom的方法：

$scope.parent={
    dtFrom : new Date(),
    dtTo : new Date()
};

这是我的改变功能dtFrom：

$scope.addDayFrom=function(day){
    $scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};

它会更改$scope.parent.dtFrom中的值，但模型不会更新为输入。

示例：今天我们是12/05/2015。

如果我在上一个按钮上点击一次，$scope.parent.dtFrom将为11/05/2015。

这就是显示所有但输入的内容。

我认为这是一个范围问题，但无法弄清楚它在哪里。 你有什么线索来解决这个问题吗？

编辑： 图片在这里：http://hpics.li/4e0fab6

Answer 1

更改您的代码：

$scope.addDayFrom=function(day){
    $scope.parent.dtFrom.setDate($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};

对此：

$scope.addDayFrom=function(day){
    $scope.parent.dtFrom = ($scope.parent.dtFrom.getDate() +  parseInt(day));
    console.log($scope.parent.dtFrom);
};

查看Angular UI datepicker documentation，您可以看到您无需访问parent。我以为您尝试访问parent范围，但实际上您正在访问您在此处设置的parent属性：

$scope.parent={
    dtFrom : new Date(),
    dtTo : new Date()
};

Angular UI datepicker正在通过引用观看，正如我们在their source code中看到的那样，完全合理，因为这是最有效的观看策略。要了解更多相关信息，请阅读Angular核心文档中的Scope $watch Depths：

  

Scope $watch Depths

     

可以通过三种策略进行脏检查：通过引用，通过   收集内容和价值。策略的种类不同   他们检测到的变化及其性能特征。

     

  
• 通过引用（scope.$watch (watchExpression, listener)）观看会在整个值返回时检测到更改   watch表达式切换到新值。如果值是数组或   一个对象，它内部的变化未被检测到。这是最多的   有效的战略。
  
• 观看集合内容（scope.$watchCollection (watchExpression, listener)）会检测内部发生的更改   数组或对象：添加，删除或重新排序项目时。该   检测很浅 - 它不会进入嵌套集合。   观看收藏内容比观看更昂贵   参考，因为集合内容的副本需要   保持。但是，该策略试图最小化数量   需要复制。
  

• 按值观察（scope.$watch (watchExpression, listener, true)）会检测到任意嵌套数据的任何更改   结构体。它是最强大的变化检测策略，也是   最昂贵的。嵌套数据结构的完整遍历是   每个摘要都需要，并且需要保存完整的摘要   存储器中。

       

  

  

这就是为什么它没有检测到$scope.parent.dtFrom.setDate(newDate)的使用情况，并且模型没有被更新。因此，只需将该段代码更改为$scope.parent.dtFrom = newDate，它就可以正常工作（因为它已经使用了全局变量方法）。

Answer 2

这有点黑客但是，它有效...所以我与你分享

当我启动我的应用程序时，我创建了一个本地日期变量，当我点击我的按钮时，我会更改。当它完成后，我这样做：

$scope.parent.dtFrom = new Date(localDateVariable);

不是最佳解决方案，而是解决方案。