Question

在我的angularjs应用程序上，我显示了一个模态窗口来编辑事件并添加/删除事件日期（我使用bootstrap datepicker和timepicker）。

事件有一些固定的日期，我没有问题，因为我首先创建了它们，我在ng-model（datepicker＆amp; timepicker）上使用它们。

问题是当用户按下添加按钮动态添加新事件日期时，我没有日期变量来分配给日期选择器的ng模型。

我的目标是什么：

在.controller('ModalEditEventP4ctrl',..里面我操纵模态窗口（编辑事件）。我有一个空对象，我用它来将新的事件日期添加到指令addNewDate中。 $scope.datesObj = {}

add new eventdate按钮是一个指令，我从控制器传递一个日期数组对象。在指令中我创建了新的日期对象并将它们推送到数组上，以便将其分配到html模板中：

.directive('addNewDate', function($compile){
  return {
    restrict: 'AE',
    scope: {
        onClick: '&',
        dyndatesObj: '='
    },
    link: function (scope, element, attrs) {
        element.bind('click', function () {                    
        /*1. here i create new date object and push it on the array */
            scope.dyndatesObj.push({dynDateStart:new Date(),dynDateEnd:new Date(),dtStatus:'1'});

           /*2. get the last item */
            var items = $(".row.basicDates").length-1;

            /*3. compile another directive 'newDateBlock'*/
            /* and pass it into the DOM*/
            /* the directive it is compiled but the datepickers are empty*/
            $('.row.basicDates:eq('+items+')').append($compile("<new-date-block />")(scope));
            scope.$apply();
        });
    }
  }
 })

指令newDateBlock具有我通过ebove指令编译的DOM元素：

   .directive('newDateBlock', function(){
        return {
            restrict: 'AE',
            scope: {
                onClick: '&',
                myDate:'='
            },
            templateUrl: 'assets/modules/part4/templates/addNewDate.tpl.html',
            link: function (scope, element, attrs) {
                element.bind('click', function () {
                    console.log('inside directive');
                });
            }
        }
    });

模板文件addNewDate.tpl.html （我不会全部展示）。一切正常，除了日期选择器，虽然我指定了 ng-model = datesObj [datesObj.length-1] [dynDateStart] ，但它们都是空的。

<div class="row" >   
<div class="col-md-6">
   <div class="row">
    <div class="col-md-4" style="padding-left: 0;">
        <label>Start Date</label>
        <label>Start Time</label>
    </div>
    <div class="col-md-8" style="padding-left: 0;">
        <p class="input-group">
            <input type="text" class="form-control" style="width:100px"
                   datepicker-popup="{{format}}"
                 /*ng-model seems not to work*/
                   ng-model="datesObj[datesObj.length-1][dynDateStart]"
                   is-open=""
                   datepicker-options="dateOptions"
                   ng-required="true"
                   close-text="Close"/>
      <span class="input-group-btn" style="float:left">
       <button type="button" class="btn btn-default" ng-click="">
           <i class="glyphicon glyphicon-calendar"></i>
       </button>
      </span>
        </p>
        <timepicker ng-model="" ng-change="changed()" hour-step="1" minute-step="10" show-meridian="false"></timepicker>
    </div>
</div>

似乎ng-model中的值没有编译，我不知道到底是什么问题。任何帮助将不胜感激。

更具体一点，我得到错误（在浏览器上）：

TypeError: Cannot read property 'initDate' of undefined
    at link (http://.../bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js:8:23435)
    at http://.../bower_components/angular/angular.min.js:70:141
    at $ (http://.../bower_components/angular/angular.min.js:70:197)
    at B (http://..../bower_components/angular/angular.min.js:59:255)
    at g (http://..../bower_components/angular/angular.min.js:51:335)
    at g (http://..../bower_components/angular/angular.min.js:51:352)
    at g (http:/..../bower_components/angular/angular.min.js:51:352)
    at g (http://.../bower_components/angular/angular.min.js:51:352)
    at g (http://..../bower_components/angular/angular.min.js:51:352)
    at g (http://.../bower_components/angular/angular.min.js:51:352) <input type="text" class="form-control ng-pristine ng-untouched ng-valid ng-isolate-scope" style="width:100px" datepicker-popup="{{format}}" ng-model="datesObj[0].dynDateStart" is-open="" datepicker-options="dateOptions" ng-required="true" close-text="Close">

如何在angularjs中动态创建日期选择器

0 个答案: