전체 캘린더에서 eventClick 함수 openClick 1.x

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을 지원 실현 . 나는 주위에 내 코드를 변경하지만 난 여전히 콘솔 로그에 오류를 얻고있다하십시오 solution..has의 사람이 유사 아무것도 경험이 시점에서

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

라는 폴더에 중첩되어 나는이