Fatal编程技术网
  • javascript/
  • Javascript 在angular ui模式中使用angular ui引导数据的奇怪行为

Javascript 在angular ui模式中使用angular ui引导数据的奇怪行为

javascript html angularjs

Javascript 在angular ui模式中使用angular ui引导数据的奇怪行为,javascript,html,angularjs,angular-ui-bootstrap,Javascript,Html,Angularjs,Angular Ui Bootstrap,我正在使用Angular开发我的第一个应用程序，我被这个问题困扰了几个小时，现在我看不出有什么问题。 我在其他地方使用过ui引导日期，没有任何问题，但我尝试在模式中使用它，结果是，无论何时您第一次在模式中选择日期，它都能正常工作，但如果您选择了错误的日期，并希望选择正确的日期，则单击按钮再次打开日历，如果它在模态内部 我创造了一个新的世界 代码片段如下： index.html <!DOCTYPE html> <html ng-app="myApp"> <head&

我正在使用Angular开发我的第一个应用程序，我被这个问题困扰了几个小时，现在我看不出有什么问题。 我在其他地方使用过ui引导日期，没有任何问题，但我尝试在模式中使用它，结果是，无论何时您第一次在模式中选择日期，它都能正常工作，但如果您选择了错误的日期，并希望选择正确的日期，则单击按钮再次打开日历，如果它在模态内部

我创造了一个新的世界

代码片段如下：

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>
非常确定它与模式的作用域相关，覆盖了您的作用域和指令中的
$scope.opened
。我不确定确切原因，但您可以通过在
dateModal
模板中使用
is open=“$parent.opened”
来解决此问题。

作用域继承自其父作用域

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

有关作用域如何工作的详细说明，请参见：

这是一个工作示例，无需使用
$parent
查看这个问题，它有一个类似（如果不是相同的话）的问题：谢谢，这很有效。我还是想知道为什么？？？。我对Angular和advanced javascript还不熟悉，所以能对这个问题进行详细的解释就太好了。不管怎样，那太好了。它起作用了。非常感谢。请看一下上面@link64的精彩解释。谢谢你的回答。不得不接受这个，因为它提供了更好的解释。我还假设这是比使用$parent更好的实现，对吗？或者这并不重要？使用$parent只会将您带到直接家长处。它不适合你可能有多个层次的情况。对于简单的应用程序，这可能不是问题，但一旦在一个应用程序中有多个指令和控制器，我就会避免使用它 
<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>

'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';
}]);

})();

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