2014-11-08 2 views
0

http://angular-ui.github.io/bootstrap에 주어진 모달의 예를 사용하려고합니다. 내가 작업을 위해 버튼을 클릭하면, 내 화면이 일부 창이 팝업 것처럼 흐릿하지만 난 거기에 아무것도 볼 해달라고 내가 모달을 열 때 콘솔이 말한다 도착각도로 모달을 여는 중 오류가 발생했습니다.

Failed to load resource: the server responded with the status 404 (Not Found) --- Cannot GET /function%20(a,b)%7Breturn%20b.templateUrl%7C%7C%22template/modal/window.html%22%7D Uncaught TypeError: undefined is not a function --- angular.min.js

내 컨트롤러

'use strict' 
var LoginCtrl = ['$scope', '$modal', '$log', function($scope, $modal, $log) { 
    $scope.items = ['item1', 'item2', 'item3']; 
    $scope.open = function (size) { 

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

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
    }, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
    }; 
}]; 

var ModalInstanceCtrl = ['$scope', '$modalInstance', 'items', function($scope, $modalInstance, items){ 
    $scope.items = items; 
    $scope.selected = { 
     item: $scope.items[0] 
    }; 

    $scope.ok = function() { 
     $modalInstance.close($scope.selected.item); 
    }; 

    $scope.cancel = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]; 

내 템플릿 나는이 이상한 오류가 표시하고 왜

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

     <button ng-click="open()">Open me!</button> 
     <button ng-click="open('lg')">Large modal</button> 
     <button ng-click="open('sm')">Small modal</button> 
     <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
    </div> 

. 버전 0.11.2의 ui-bootstrap-tpls.min.js와 버전 1.3.1의 angular.min.js를로드 중입니다. 나는 같은 종류의 이슈 인 here을 언급했고 그들 중 하나에 의해 나는 업데이트 된 버전을 가지고 있다고 말했다. 어떤 제안이라도 도움이 될 것입니다.

+0

(<스크립트 유형 = "텍스트/NG 템플릿" id = "myModalContent.html">)? 그럼에도 불구하고 나는 템플릿 URL을 "

Test

"과 같은 기본 템플릿으로 대체하여 어떤 일이 발생하는지 확인합니다. – Tomer

+0

@Tomer : templateUrl을 '

Test

'으로 바꿔서 같은 결과를 유지했습니다. 나는 여전히 리소스 오류를로드하지 못했습니다. 너와 내가 확인하기를 원하는 것과 똑같은가? – Deepak

+0

내 대답보기 .. – Tomer

답변

0

좋아,이 일부로드 순서/혼합 다른 버전 또는 종속성 - 문제 (들) 같습니다.
그러나이 버전의 앵글 (1.1.3)은이 버전의 부트 스트랩으로는 좋지 않습니다.
먼저, Here은 코드 1.2.0.25가 포함 된 코드의 기본 버전입니다.
나는 또한 index.html, 버전 1.1.3의 각도 (현재 표시된 것으로 표시)에 포함 시켰습니다.

<!-- <script src="https://code.angularjs.org/1.1.3/angular.min.js"></script> --> 

에 관계없이 특정 오류, 내가 강하게 버전 1.3 각도 업그레이드 권장 (또는 1.2.25 넣다 IE8 지원은 필수입니다) : 당신은 두 개의 버전을 교체하는 경우, 오류가 재생합니다. 훨씬 빨라졌으며 훨씬 더 멋진 기능이 포함되어 있으며 많은 EMCA5 및 HTML5/CSS3 기능을 활용합니다.
업그레이드 할 수 없습니까? 디버깅 시간입니다 ... 무엇이 잘못되었는지를 "그냥"알아야합니다.
행운을 비네!

+0

오늘 일찍 답장을 한 번 두 번 확인했는데 버전이 맞지 않았습니다. 내가 언급 한 angular.js도 이전 버전의 각도 버전을 가리키고있었습니다. 시간을내어 주셔서 감사 드리며 이것에 대한 명확한 실례를 제시하십시오. 그것이 효과적이기 때문에 기쁘다. – Deepak

+0

당신은 환영합니다. 질문을 답으로 표시해 주시면 더 이상 귀찮게하지 않으실 수 있습니다 .. – Tomer

+0

죄송합니다 .. 답변으로 표시했습니다. – Deepak

2

동일한 문제가 발생하여 마침내이 answer이 내 날을 저장했습니다.

일반 UI 부트 스트랩 라이브러리 (예 : ui-bootstrap.js)가 아닌 템플릿 (예 : ui-bootstrap-tpls.js)을 사용하여 UI 부트 스트랩 라이브러리에 연결되어 있는지 확인하십시오.

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
, 즉 (templateUrl 속성에) 전체 .tpl 파일 경로를 참조하는 것이 아니라 템플릿의 각 정의를 사용하는 일반 HTML로 템플릿을로드하지 왜