Question

在完整日历中，当我点击某个活动时，我想要弹出一个模态。我有模态代码，我在指令中通过$scope变量引用但没有发生任何事情。

我很迷茫，无法找到一个很好的例子来解决问题。谁能提出任何建议？

至少，我希望模态至少在屏幕上打开，即使它是空的，但我不明白该怎么做。

日历配置

myApp.directive('msResourceCalendarDirective', function ($window, $timeout, $http) {
    return {
        restrict: 'AE',
        templateUrl: '/client/resourceCalendarDirective/view.html?v=1',
        controller: function($scope, $element, $attrs, $uibModal) {

            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();


            // Open modal from modal
            $scope.alertOnEventClick  = function (eventObj) {
                console.log('Opening modal...');
                var modalInstance = $uibModal.open({
                    animation: true,
                    templateUrl: 'resourceUpdateEventCalendar/view.html',
                    backdrop: false,
                    resolve: {
                        event: function () {
                            return eventObj;
                        }
                    }
                });

                // Scope apply here to make modal show up
                $scope.$evalAsync(function() {
                    modalInstance.result.then(
                        function (event) {
                            console.log('Modal closed at: ' + new Date());
                            console.log(event);
                            //$scope.events.push(event);
                        },
                        function () {
                            console.log('Modal dismissed at: ' + new Date());
                        }
                    );
                });

            };


            // empty array of events
            $scope.events = [];

            $scope.myevents = function(start, end, timezone, callback) {
                $http.get('/api/v1/sample').then(function(response) {

                    //var events = [];
                    angular.forEach(response.data, function(event,key){
                        $scope.events.push({
                            id: event._id,
                            title: event.title,
                            start: event.startDateTime,
                            end: event.endDateTime
                        });
                    });
                    callback($scope.events);
                });
            };



            /* config calendar object */
            $scope.uiConfig = {
                calendar: {
                    height: 650,
                    editable: true,
                    header: {
                        left: 'month basicWeek basicDay',
                        center: 'title',
                        right: 'today prev, next'
                    },
                    eventClick: $scope.alertOnEventClick
                    // eventDrop: $scope.alertOnDrop,
                    // eventResize: $scope.alertOnSize
                }
            };

            // linking event array to calendar to be displayed
            $scope.eventSources = [$scope.myevents];

        }
    }
});

resourceUpdateEventCalendar / view.html

<!-- Update Modal -->
<div class="modal" id="calendarModal" >
    <div class="modal-dialog">
        <div class="modal-content" >
            <div class="modal-header">
                <h3>Edit Resource</h3>
            </div>
            <div class="modal-body">
                <div class="form-group row">
                    <div class="col-xs-6">
                        <label for="resourceTitle">Title</label>
                        <input id="resourceTitle" class="form-control" type="text" name="title" ng-model="sample.title">
                    </div>
                </div>
                <div class="form-group">
                    <ms-date-time-picker ng-model="sample.startDateTime" placeholder="From" id="dateFrom"></ms-date-time-picker>
                </div>
                <div class="form-group">
                    <ms-date-time-picker ng-model="sample.endDateTime" placeholder="To" id="dateTo"></ms-date-time-picker>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="updateResource()" >Update Resource</button>
                <button class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

编辑：好的，经过数小时的研究，我意识到最近的AngularJS版本支持$uibModal，我之前没有使用过。{1}}。我已经更改了我的代码，但我仍然在控制台日志中出现错误：

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (view.html, line 0)
Error: [$compile:tpload] http://errors.angularjs.org/1.6.2/$compile/tpload?p0=resourceUpdateEventCalendar%2Fview.html&p1=404&p2=Not%20Found
http://localhost:3000/libs/angular/angular.min.js?1.6.4:6:430
http://localhost:3000/libs/angular/angular.min.js?1.6.4:159:188
http://localhost:3000/libs/angular/angular.min.js?1.6.4:134:168
$digest@http://localhost:3000/libs/angular/angular.min.js?1.6.4:145:97
$apply@http://localhost:3000/libs/angular/angular.min.js?1.6.4:148:348
l@http://localhost:3000/libs/angular/angular.min.js?1.6.4:101:95
onload@http://localhost:3000/libs/angular/angular.min.js?1.6.4:106:490

Error: [$compile:tpload] http://errors.angularjs.org/1.6.2/$compile/tpload?p0=resourceUpdateEventCalendar[object Object]view.html&p1=404&p2=Not%6Found
http://localhost:3000/libs/angular/angular.min.js?1.6.4:6:430
http://localhost:3000/libs/angular/angular.min.js?1.6.4:159:188
http://localhost:3000/libs/angular/angular.min.js?1.6.4:134:168
$digest@http://localhost:3000/libs/angular/angular.min.js?1.6.4:145:97
$apply@http://localhost:3000/libs/angular/angular.min.js?1.6.4:148:348
l@http://localhost:3000/libs/angular/angular.min.js?1.6.4:101:95
onload@http://localhost:3000/libs/angular/angular.min.js?1.6.4:106:490

在这一点上，我迷失了解决方案..有没有人经历过类似的事情？

Answer 1

我找到了解决方案。我在templateURL中错过了父目录路径名。该文件嵌套在名为client

的文件夹中

templateUrl: 'resourceUpdateEventCalendar/view.html'

应该是

templateUrl: 'client/resourceUpdateEventCalendar/view.html'

我希望这可以帮助那些面临类似问题的人

在完整的日历角度1.x中的eventClick函数上打开模态

1 个答案: