重新渲染角度 ui-bootstrap 日期选择器不一致

Question

在重新渲染 datepicker-popup 指令时，ui-datepicker 似乎没有考虑之前选择的模型值。

请查看此plunker，选择一个日期，然后将复选框切换两次以删除并重新创建日期选择器表单字段。

datepicker 表单字段值从 2014-12-14 更改为 Sun Dec 14 2014 16:21:46 GMT+0100 (CET)

<form class="form" name="test">
          <legend>Anuglar ui datepicker and ng-if Test</legend>
          <div  class="form-group">
            <label>
              <input type="checkbox" ng-model="mymodel.namespace.showDate"/>
              Show date
            </label>
            <pre>{{mymodel.namespace.date}}</pre>
          </div>
          <div  class="form-group"
                ng-if="mymodel.namespace.showDate === true "
          >

            <input 
              class="form-control" 
              name="date" 
              type="text" 
              ng-model="mymodel.namespace.date" 
              show-weeks="false" 
              show-button-bar="false" 
              is-open="calendarOpened" 
              ng-required="true" 
              ng-click="calendarOpened=true" 
              datepicker-popup />
          </div>
        </form>



// JS
app = angular.module('testApp', ['ui.bootstrap'])


app.controller('TestCtrl', function($scope){
  $scope.mymodel = {
    namespace: {
      date: new Date(),
      showDate: true
    }
  }
})

Answer 1

我能够复制您的错误并修复它。

这一行

改变

<div  class="form-group" ng-show="mymodel.namespace.showDate === true ">

两者之间的区别在于，每次使用 ng-if 语句计算结果为 true 时，它​​都会重新呈现该元素。使用 ng-show 类似于使用 CSS 隐藏它。

我发现如果我只想隐藏一个元素直到需要它，我会使用 ng-show。如果我想阻止一个元素渲染，我会使用 ng-if。