在angular-ui-modal内使用angular-ui-bootstrap日期的奇怪行为

Question

我正在使用Angular开发我的第一个应用程序，但现在这个问题困扰了几个小时，我看不出有什么问题。 我在其他地方使用ui-bootstrap date没有问题，但是比起我在模态中尝试使用它，发生的事情是，每当您第一次在模态中选择一个日期时，它就可以正常工作，而不是您选择了错误的日期并希望选择正确的一个，单击按钮以再次打开日历（如果它位于模式中则无法使用）。

我创建了一个重现错误的样本。

代码片段如下：

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet"      href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="bootstrap-theme@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" />
<script data-require="angular.js@1.3.0-beta.5" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="app.js"></script>
</head>

<body>
<h1>Angular ui date!</h1>
<div ng-controller="DateController">
  <div class="row">
      <div class="col-md-6">
          <h4>Date(This works)</h4>
          <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="{{format}}" disabled
                     ng-model="activityDate" is-open="opened" datepicker-options="dateOptions"
                     ng-required="true" close-text="Close"/>

            <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="open($event)"><i
                      class="glyphicon glyphicon-calendar"></i></button>
            </span>
          </p>
      </div>
  </div>
  <div class="row">
      <div class="col-md-6">
          <button type="button" class="btn btn-primary" ng-click="openModal()">Open Date Modal</button>
      </div>
  </div>
</div>

dateModal.html

<div>
<div class="modal-header">
  <h3 class="modal-title">Date Modal Sample</h3>
</div>
<div class="modal-body">
<div class="row">
  <div class="col-md-6">
      <h4>Modal Date(works only the first time! whyyyyyy?????)</h4>

      <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" disabled
                 ng-model="dateModal" is-open="opened"
                 ng-required="true" close-text="Close"/>
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" ng-click="open($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
      </p>
  </div>
</div>
</div>
<div class="modal-footer">
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>

app.js

'use strict';

(function () {
var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('DateController', ['$scope', '$modal', '$log', function($scope, $modal, $log){
  //Initializes date
    $scope.today = function () {
        $scope.activityDate = new Date();
    };

    //open calendar to select initial date
    $scope.open = function ($event) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.opened = true;
        $log.info('open function was called');
    };

    $scope.today();
    $scope.format = 'MM/dd/yyyy';


    //open modal window
    $scope.openModal = function () {
        var modalInstance = $modal.open({
            templateUrl: 'dateModal.html',
            controller: 'DateModalController'
        });
    }

}]);

myApp.controller('DateModalController', ['$scope', '$modalInstance', function($scope, $modalInstance){

  $scope.cancel = function () {
      $modalInstance.dismiss('Cancel');
  };

  //Initializes date
  $scope.today = function () {
      $scope.dateModal = new Date();
  };

  //open calendar to select initial date
  $scope.open = function ($event) {
      $event.preventDefault();
      $event.stopPropagation();
      $scope.opened = true;
      $log.info('open button from modal calendar field has been pressed!!!!');
  };
  $scope.today();
  $scope.format = 'MM/dd/yyyy';
}]);

})();

Answer 1

可以肯定的是，它与覆盖您的作用域和指令中的$scope.opened的模式作用域有关。 我不确定确切的原因，但是您可以通过在dateModal模板中使用is-open="$parent.opened" dateModal 。

Answer 2

范围从其父范围继承。

模态被创建为初始化时传入的作用域的子代（默认情况下在$rootScope ）。 尝试直接在示波器上设置属性时，angular会自动为您创建它。 但是，如果您尝试执行model.myProperty ，如果子级范围内不存在model ，它将向上移动到父级并在那里正确设置（如果存在）。

有关范围的工作原理的很好描述可以在这里找到： https : //github.com/angular/angular.js/wiki/Understanding-Scopes

这是一个工作示例，无需使用$parent 。

http://plnkr.co/edit/WeJqirLDOoFuTqJEHEdg

 <input type="text" class="form-control" datepicker-popup="{{format}}" disabled
                     ng-model="dateModal.date" is-open="dateModal.opened" 
                     ng-required="true" close-text="Close"/>

在angular-ui-modal内使用angular-ui-bootstrap日期的奇怪行为

问题描述

2 个解决方案

解决方案1
1 2014-08-20 01:34:47

解决方案2
1 已采纳 2014-08-20 13:30:46

在angular-ui-modal内使用angular-ui-bootstrap日期的奇怪行为

问题描述

2 个解决方案

解决方案1 1 2014-08-20 01:34:47

解决方案2 1 已采纳 2014-08-20 13:30:46

解决方案1
1 2014-08-20 01:34:47

解决方案2
1 已采纳 2014-08-20 13:30:46