在完整的日歷角度 1.x 中打開 eventClick 功能的模態

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];

        }
    }
});

資源更新事件日歷/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 ，我以前沒有使用過。 我已經更改了代碼，但控制台日志中仍然出現錯誤：

[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'

我希望這可以幫助面臨類似問題的人