각도 UI Boostrap에서 모달을 열 때 404 찾을 수 없음 오류

Question

UI 부트 스트랩을 사용할 때 정말 이상한 문제가 있습니다. 가장 간단한 예제조차도 작동하지 않습니다. 그래서 내 경우입니다 :

yeoman 플러그인을 사용하는 Play Framework 응용 프로그램이 있습니다 : https://github.com/tuplejump/play-yeoman. AngularJS와 Bootstrap을 사용하고 있습니다. 지금까지 모든 것이 잘되었지만 http://angular-ui.github.io/의 UI Bootstrap 라이브러리를 사용하여 첫 번째 모달을 열려고 시도했을 때 이러한 이상한 오류가 발생했습니다. http://angular-ui.github.io/bootstrap/#/modal에서 정확한 코드를 사용했지만 어떻게 든 작동하지 않습니다. 이것은 내 모달을 여는 코드입니다 :

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: ModalInstanceCtrl, 
    size: size, 
    resolve: { 
     items: function() { 
     return ['item1', 'item2', 'item3']; 
     } 
    } 
    }); 

그리고 dev에 콘솔에 표시되는 오류는 다음과 같습니다

GET http://localhost:9000/ui/function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22%7D 404 (Not Found) angular.js:9499 
Uncaught TypeError: undefined is not a function angular.js:9512 

나는 유사한 문제에 대한 많은 솔루션을 시도했지만 그 중 어느 것도 작동하지 않습니다. 이것은 내가 UI를-부트 스트랩로드하는 방법입니다

<script src="components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script> 

내가 오랜 시간 동안 솔루션을 찾고 있었어요을하지만 기능의 20 % (A, B) % 7에 문제가 발생하지 않았습니다 .. . URL에서 아무 해결책도 작동하지 않았다. 어떤 도움을 주셔서 감사합니다! 를 heres

Answer 1

내 코드 :

추가 서비스

.factory('ModalService', ['$modal', function($modal) { 
    var modalDefaults = { 
     backdrop: true, 
     keyboard: true, 
     modalFade: true, 
     size: 'sm', 
     templateUrl: 'pages/modals/transfer.html' 
    }; 

    var modalOptions = { 
     closeButtonText: 'Close', 
     headerText: 'Success!', 
     bodyText: 'DefaultBody' 
    }; 

    return { 
      showModal: function (customModalDefaults, customModalOptions) { 
        if (!customModalDefaults) customModalDefaults = modalDefaults; 
        if (!customModalOptions) customModalOptions = modalOptions; 
        customModalDefaults.backdrop = 'static'; 
        return this.show(customModalDefaults, customModalOptions); 
      }, 
      show:function (customModalDefaults, customModalOptions) { 
         //Create temp objects to work with since we're in a singleton service 
         var tempModalDefaults = {}; 
         var tempModalOptions = {}; 

         //Map angular-ui modal custom defaults to modal defaults defined in service 
         angular.extend(tempModalDefaults, modalDefaults, customModalDefaults); 

         //Map modal.html $scope custom properties to defaults defined in service 
         angular.extend(tempModalOptions, modalOptions, customModalOptions); 

         if (!tempModalDefaults.controller) { 
          tempModalDefaults.controller = function ($scope, $modalInstance) { 
           $scope.modalOptions = tempModalOptions; 
           $scope.modalOptions.ok = function (result) { 
            $modalInstance.close(result); 
           }; 
           $scope.modalOptions.close = function (result) { 
            $modalInstance.dismiss('cancel'); 
           }; 
          } 
         } 

         return $modal.open(tempModalDefaults).result; 
       } 
    } 

}]);

및 컨트롤러

, 기본 모달에게

ModalService.showModal()를 얻기 위해 전화;

컨트롤러에 서비스를 삽입하는 것을 잊지 마십시오.

편집 : 추가 템플릿 코드는

<div class="modal-header"> 
    <h3>{{modalOptions.headerText}}</h3> 
</div> 
<div class="modal-body"> 
    <p>{{modalOptions.bodyText}}</p> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn" 
      data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button> 
</div> 

Answer 2

당신은 UI-부트 스트랩의 예를의 마크 업 부분에서 템플릿 부분을 복사 했습니까?

<script type="text/ng-template" id="myModalContent.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
     <ul> 
      <li ng-repeat="item in items"> 
       <a ng-click="selected.item = item">{{ item }}</a> 
      </li> 
     </ul> 
     Selected: <b>{{ selected.item }}</b> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary" ng-click="ok()">OK</button> 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
    </div> 
</script> 

Answer 3

나는이 문제가 있었고 버전 충돌이있는 것으로 나타났습니다. Angular 버전 1.0.8과 Angular Bootstrap 0.11.0을 사용하고있었습니다. Angular 1.2.21로 업그레이드하면 문제가 해결 된 것 같습니다.