完全なカレンダーの角度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> 

EDIT：OK、研究の時間後、私は最近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 

この時点で、私は誰もがこれに似た何かを経験したsolution..hasために失われたのですか？

Answer 1

解決策が見つかりました。 親ディレクトリのパス名がtemplateURLにありませんでした。ファイルがclient

templateUrl: 'resourceUpdateEventCalendar/view.html' 

というフォルダにネストされているが、私はこれが