无法绑定模态,ModalInstance.result中的数据。然后总是被解雇

时间:2014-07-31 06:40:26

标签: angularjs

我有一份记录清单。在每条记录中,我都有一个“编辑”按钮。单击编辑按钮将打开一个模式,其中需要绑定当前数据。

然而,当我点击编辑时,一个空模态总是打开而没有填入数据。在调试时,我开始知道由于某些问题,控件将转到错误部分,所以我不断得到一个消息显示"模态正在被解雇"。

以下是我的代码:

var EditModalInstance = $modal.open({
   templateUrl: "EditCourseModal.html",
   controller: EditModalInstanceCtrl,
   resolve: {
       courseDetails: function () {
          return $scope.courseDetails;
       }
   }
});

EditModalInstance.result.then(function (selectedItem) {
   $scope.selected = selectedItem;
   $log.info(selectedItem + "Here I am.");
}, function () {
   $log.info('Modal dismissed at: ' + new Date()); //control is coming in this part always
});

这是我的模态控制器:

var EditModalInstanceCtrl = function ($scope, $modalInstance, $log, coursesFactory,
courseDetails)              {

$scope.courseDetails = courseDetails;
$scope.selected = $scope.courseDetails;

$scope.update = function () {
    coursesFactory.updateCourse($scope.courseDetails)
    .success(function (status) {
        $scope.status = "Course details updated.";
        $log.info(status);
        getCourses();
    })
    .error(function (error, status) {
        $scope.status = "Unable to update course details.";
        $log.warn(error, status);
    });
};

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

然后我在视图中使用了这个课程详细信息:

<script type="text/ng-template" id="EditCourseModal.html">
    <div class="modal-header">
       <span><strong>Edit course</strong></span>
       <button type="button" class="close" data-ng-click="cancel()">x</button>
    </div>
    <div class="modal-body">
       <dl>
         <dt>Id</dt>
         <dd><span>{{courseDetails.Id}}</span></dd>
       </dl>
       <dl>
         <dt>Name</dt>
         <dd>
            <input type="text" data-ng-model="courseDetails.Name"></input>
         </dd>
       </dl>
       <dl>
         <dt>Duration</dt>
         <dd>
            <input type="text" data-ng-model="courseDetails.Duration"></input></dd>
         </dl>
     </div>
     <div class="modal-footer">
          <button class="btn btn-primary" data-ng-click="update()">Update</button>
          <button class="btn btn-warning" data-ng-click="cancel()">Cancel</button>
     </div>
</script>

1 个答案:

答案 0 :(得分:1)

我怀疑你的决心不是一个承诺对象,即$ scope.courseDetails;也许不是一个承诺。

尝试这样的事情:

 resolve:
   courseDetails: function () {
      return CourseFactory.getCourseDetails();
   }

确保getCourseDetails返回一个promise。