1

我有一个附加了 Angular UI 日期选择器的输入字段。在此之下，我添加了 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

4

2 回答 2

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 文档，您可以看到您不需要访问parent. 我以为您正在尝试访问parent范围，但实际上您正在访问parent您在此处设置的属性：

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

Angular UI datepicker 是通过引用来观察的，正如我们在他们的源代码中看到的那样，这是非常有意义的，因为这是最有效的观察策略。要了解更多信息，请阅读Angular 核心文档中的Scope $watchDepths ：

范围$watch深度

脏检查可以通过三种策略完成：按引用、按集合内容和按值。这些策略的不同之处在于它们检测到的变化类型以及它们的性能特征。

  • 当watch表达式返回的整个值切换到新值时，通过引用( ) 进行监视会检测到更改。scope.$watch (watchExpression, listener)如果值是数组或对象，则不会检测到其中的更改。这是最有效的策略。
  • 观察集合内容( scope.$watchCollection (watchExpression, listener)) 检测数组或对象内部发生的更改：添加、删除或重新排序项目时。检测很浅 - 它不会进入嵌套集合。观看集合内容比通过引用观看更昂贵，因为需要维护集合内容的副本。但是，该策略试图最小化所需的复制量。

  • 按值观察( scope.$watch (watchExpression, listener, true)) 检测任意嵌套数据结构中的任何变化。它是最强大的变更检测策略，但也是最昂贵的。每个摘要都需要完整遍历嵌套数据结构，并且需要将其完整副本保存在内存中。

    在此处输入图像描述

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

于 2015-05-13T12:55:08.490 回答
0

这有点骇人听闻，但是，它有效……所以我与您分享

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

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

不是最好的解决方案，而是一个解决方案。

于 2015-05-12T14:07:08.410 回答