Angular UI 부트 스트랩 지시문 템플릿 누락

Angular UI 부트 스트랩 지시문 템플릿 누락

---

현재 bootstrap-UI내 컴퓨터 에서 각도를 로컬로 테스트하고 있습니다. 아코디언과 대화 상자의 예를 재현하려고 할 때. 내 콘솔에 템플릿이 없다는 오류 메시지가 나타납니다.

오류의 예 : 404 찾을 수 없음-localhost / angular / template / message.html

ui-bootstrap-0.1.0.js지시문을 살펴보면 템플릿이 URL있습니다.

templateURL지시문 의 목적은 무엇입니까 ?

전체 앵귤러 bootstrap-UIzip 파일을 다운로드 할 때 해당 템플릿이 포함되어 있다고 가정 합니까?

헤더에 포함해야하는 다른 파일이 누락 되었습니까?

<link rel="stylesheet" href="includes/css/bootstrap.css">
<script src="includes/js/angular.js"></script>
<script src="includes/js/ui-bootstrap-0.1.0.js"></script>

---

두 가지 선택이 있습니다.

1. 자신 만의 템플릿을 만들고 싶지 않고 내장 된 템플릿을 원하는 경우 ui-bootstrap-tpls-0.1.0.js파일을 다운로드해야합니다. 그러면 모든 템플릿이 주입되어 앱에 미리 캐시됩니다. https://github.com/angular-ui /bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

2. 자신 만의 템플릿을 만들고 templates싶다면 앱에 폴더를 만들고 angular-ui / bootstrap 프로젝트에서 템플릿을 다운로드하세요. 그런 다음 직접 사용자 정의하려는 항목을 덮어 씁니다.

자세한 내용은 https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files에서 확인하세요.

편집 :

또한 bootstrap-tpls.js를 다운로드하고 AngularJS 데코레이터를 사용하여 지시문의 templateUrl을 변경하여 지시문의 templateUrl 중 일부를 자신의 것으로 덮어 쓸 수도 있습니다. 다음은 datepicker의 templateUrl을 변경하는 예입니다.

http://docs.angularjs.org/api/AUTO.$provide#methods_decorator

myApp.config(function($provide) {
  $provide.decorator('datepickerDirective', function($delegate) {
    //we now get an array of all the datepickerDirectives, 
    //and use the first one
    $delegate[0].templateUrl = 'my/template/url.html';
    return $delegate;
  });
});

---

이 문제로 2 시간을 낭비한 후 5 센트. 다음을 수행해야합니다.

1. http://angular-ui.github.io/bootstrap/로 이동합니다 . 사용자 지정 빌드 만들기를 클릭하고 사용하는 기능을 선택합니다. (1 개 항목에 대해 60k를 당길 필요가 없습니다).
2. custom.tpls.js내 경우에 포함ui-bootstrap-custom-0.10.0.min.js
3. 귀하의 Angular 모듈에는 'ui.bootstrap.yourfeature'제 경우에는'ui.bootstrap.modal'

4. 또한 'ui.bootstrap.tpls' . 따라서 내 모듈의 완전한 종속성은 다음과 같습니다.

   var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);

5. 2 시간을 절약하고 행복하세요 :-).

---

이 오류 메시지는 http://plnkr.co/edit/aix6PZ?p=preview에 설명 된대로 다른 시나리오에서도 발생하는 것으로 보입니다.

모듈 종속성을 'ui.bootstrap'대신 'ui.bootstrap.dialog'로만 지정하면 각도가 템플릿을 찾을 수 없음 오류를 표시합니다.

'왜'에 대한 공식적인 설명은 다음과 같습니다 : https://github.com/angular-ui/bootstrap/issues/266

---

index.html에서 두 필수 스크립트가 모두 정의되었지만 동일한 오류가 발생했습니다. 마지막으로 ui-bootstrap.js 스크립트가 먼저로드되도록 설정 하고 ui-bootstrap-tpls.js 를 다음과 같이 설정하여로드 순서를 변경 했습니다. 문제가 해결되었습니다. 그러나 나중에 (위에서 언급했듯이) 하나의 lib 만 필요하다는 것을 알게되었습니다. 그래서 ui-bootstrap.js를 제거했습니다 .

---

내 문제는 다음과 같이 HTML에 템플릿 URL을 여전히 포함하고 있다는 것입니다.

<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">

이로 인해 내 브라우저가 중단되었습니다. 이상하지만 그랬습니다.

요약하면 내가 한 일 :

bower install bootstrap --save
bower install angular-bootstrap --save

내 index.html ( "-tpls"참고) :

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

그런 다음 내 Angular 앱에서 :

angular
  .module('myApp', ['ui.bootstrap'])

그런 다음 HTML에서 템플릿 URL을 제거하십시오.

<div uib-accordion-group class="panel-default" heading="Custom template">

붐, 작동합니다.

---

The likely cause of this issue is the accepted answer but one other possible cause of this issue is something I ran into and I wanted to post in case anyone else ran into the same secondary cause to the problem.

The symptoms were exactly the same, 404 on the bootstrap templates but in my case I actually included the 'ui-bootstrap-tpls.min.js' javascript file. The problem is that I also included the non template version, 'ui-bootstrap.min.js'. Once both were included, and I suspect order was important, one would displace the other. In my case, the non-template version displaced the templated version causing the 404 issues.

Once I made sure to ONLY INCLUDE 'ui-bootstrap-tpls.min.js' all worked as expected.

---

I've got to say reading the comments and adding my experience from 10 hours last night. Avoid UI Bootstrap it seems much more effort than its worth.

Also having read through their repo issues and comments, the whole manner in which the project has been conducted seems to be at odds with a simple and easy to use tool. Although I'm sure it started out with the best intentions, perhaps this is a module to avoid if at all possible.

Of course there is the caveat this is an opinion, perhaps we will find out if others feel the same.

ReferenceURL : https://stackoverflow.com/questions/14961498/angular-ui-bootstrap-directive-template-missing