동적 앵글 뷰와 함께 부트 스트랩 재질 디자인이 올바르게 작동하지 않습니다.

Question

저는 앵귤러 프로젝트의 index.html에 material-bootstrap 스크립트를 포함하고 있지만 작동하려면보기에 수동으로 다시 포함해야합니다.

Angular에 삽입 된 다른 모든 스크립트는 이와 같이 이상하지 않습니다.

나는 또한 그 재료 부트 스트랩, 그런트와 정자 잘 재생되지 않습니다 발견하고 빌드 자체를 제거하는 경향이

<script src="bower_components/bootstrap-material-design/scripts/material.js"></script> 
<script src="bower_components/bootstrap-material-design/scripts/ripples.js"></script> 

된 index.html은 (따라서 매뉴얼은 페이지 하단에 포함) .

Material-Booprap 및 Angular/Bower/Grunt와 관련된 알려진 버그입니까? 아니면 잘못된 것이 있습니까?

다른 것이 필요한 경우 알려 주시기 바랍니다.

편집 : bower.json에서

종속

"dependencies": { 
    "angular": "~1.3.0", 
    "json3": "~3.3.1", 
    "es5-shim": "~3.1.0", 
    "bootstrap": "~3.2.0", 
    "angular-resource": "~1.3.0", 
    "angular-cookies": "~1.3.0", 
    "angular-sanitize": "~1.3.0", 
    "angular-animate": "~1.3.0", 
    "angular-touch": "~1.3.0", 
    "angular-route": "~1.3.0", 
    "bootstrap-material-design": "*", 
    "jsjws": "~3.0.2", 
    "angular-ui-router": "0.2.11" 
    } 

Answer 1

문제는 그 DOM에 변환을 적용하고이를 자동으로 작동하도록 설계되지 않았습니다하여 부트 스트랩 작품의 재료 설계 플러그인 Angular와 같은 프레임 워크.

소재 프레임 워크는 구성 요소를 초기화하기 위해 다음과 같이 스크립트를 선언 할 필요

<script> 
    $.material.init(); 
</script> 

이 해당 개체는 페이지 로딩에 "자료화된"의미합니다. Angular.js 응용 프로그램은 단일 페이지이므로 스타일은 이미 페이지에있는 요소에만 적용됩니다 (보기를 사용하지 않고 새 구성 요소를 추가하려고하면 동일한 결과가 나타납니다).

Angular.js가 일반 페이지처럼보기 페이지를로드 한 다음 dom의 내용을 가져 오기 때문에보기 페이지에 스크립트를 포함하면 필수 동작 (완전히 작동하지 않음)이 발생합니다 보기 트리를 단일 페이지 트리와 병합하십시오.

보기를로드 한 후에 $ .material.init()에 대한 호출을 추가하는 것이 좋습니다. 잔물결 라이브러리 때문에 init 호출에 여러 번 문제가 있으므로주의하십시오. 여기에 언급 한 바와 같이 (https://github.com/FezVrasta/bootstrap-material-design/issues/184)를 사용하면 다시 이벤트 핸들러를 연결 파문을 피해야한다 :

// add the "done" boolean inside ripples.js 
window.ripples = { 
    init: function(withRipple) { /*bla bla*/ }, 
    done: false 
} 

// Then, where you run ripples.init... (aka, material.js, or maybe directly inside the init function of ripples.js) 
if (!window.ripples.done) { 
    ripples.init(); 
    ripples.done = true; 
}