Thiết kế vật liệu Bootstrap không hoạt động đúng với chế độ xem góc động

Question

Tôi bao gồm các tập lệnh material-bootstrap vào index.html của dự án Angular, nhưng chúng cần phải được bao gồm lại theo cách thủ công trong chế độ xem để hoạt động.

Điều này là lạ, như đối với tất cả các tập lệnh khác được chèn vào Góc, điều này không xảy ra.

index.html

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

Tôi cũng nhận thấy rằng vật liệu bootstrap không chơi tốt với Grunt và Bower, và có xu hướng loại bỏ cứ vào xây dựng (do đó hướng dẫn bao gồm ở dưới cùng của trang) .

Có phải những lỗi đã biết với Material-boostrap và Angular/Bower/Grunt hoặc tôi đã làm điều gì sai?

Nếu bạn cần bất kỳ điều gì khác, vui lòng cho tôi biết!

chỉnh sửa:

phụ thuộc vào 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

Vấn đề là các plugin thiết kế vật liệu cho công trình bootstrap bằng cách áp dụng biến đổi vào DOM và nó không được thiết kế để làm việc tự động với khung như Angular.

Khung liệu đòi hỏi bạn phải khai báo một kịch bản như sau để khởi tạo các thành phần:

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

Điều này có nghĩa đối tượng đó là "vật chất-ized" tại trang tải. Vì ứng dụng Angular.js là một trang, kiểu dáng chỉ được áp dụng cho các phần tử đã có trong trang (cố gắng thêm thành phần mới, cũng không sử dụng các khung nhìn: bạn sẽ nhận được kết quả tương tự).

Bạn nhận được hành vi bắt buộc (không đầy đủ chức năng) nếu bạn bao gồm các tập lệnh trong trang xem vì Angular.js, bên dưới nắp, tải trang xem như trang bình thường, sau đó lấy nội dung của trang và hợp nhất cây xem với cây một trang.

Tôi đề nghị bạn cố gắng thêm cuộc gọi vào $ .material.init() sau khi tải chế độ xem. Hãy cẩn thận vì có nhiều vấn đề với việc gọi init nhiều lần, vì thư viện gợn sóng. Như đã trình bày ở đây (https://github.com/FezVrasta/bootstrap-material-design/issues/184) bạn nên tránh gợn sóng để đính kèm xử lý sự kiện một lần nữa:

// 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; 
}