बूटस्ट्रैप सामग्री डिज़ाइन गतिशील कोणीय दृश्यों के साथ ठीक से काम नहीं कर रहा है

Question

मैं अपने कोणीय प्रोजेक्ट के index.html में सामग्री-बूटस्ट्रैप स्क्रिप्ट शामिल कर रहा हूं, लेकिन उन्हें काम करने के विचारों में मैन्युअल रूप से पुनः शामिल करने की आवश्यकता है।

यह अजीब बात है, क्योंकि कोणीय में डाली गई सभी अन्य स्क्रिप्ट के लिए यह नहीं होता है।

index.html

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

मैंने यह भी देखा है कि सामग्री-बूटस्ट्रैप ग्रंट और बोवर साथ अच्छी तरह से नहीं चलता है, और निर्माण पर ही दूर करने के लिए जाता है (इसलिए मैनुअल पृष्ठ के तल पर भी शामिल है) ।

क्या ये ज्ञात बग सामग्री-बूस्टर और कोणीय/बोवर/ग्रंट के साथ हैं या क्या मैं कुछ गलत कर रहा हूं?

यदि आपको कुछ और चाहिए तो कृपया मुझे बताएं!

संपादित: 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

समस्या यह है कि बूटस्ट्रैप कार्यों के लिए सामग्री डिजाइन प्लगइन डोम के लिए परिवर्तनों को लागू करने और इसके साथ स्वचालित रूप से काम करने के लिए नहीं बनाया गया है द्वारा कोणीय जैसे ढांचे।

सामग्री ढांचा घटकों प्रारंभ करने में निम्नलिखित की तरह एक स्क्रिप्ट की घोषणा करने की आवश्यकता है:

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

इसका मतलब है कि वस्तु पेज लोड हो रहा है पर "सामग्री-ized" कर रहे हैं। चूंकि Angular.js एप्लिकेशन एकल-पेजेड है, इसलिए शैली केवल पृष्ठ में मौजूद तत्वों पर लागू होती है (दृश्यों का उपयोग किये बिना भी नया घटक जोड़ने का प्रयास करें: आपको एक ही परिणाम मिलना चाहिए)।

यदि आप दृश्य पृष्ठों में स्क्रिप्ट शामिल करते हैं तो आपको आवश्यक व्यवहार (पूरी तरह कार्यात्मक नहीं) मिलता है क्योंकि हूड के तहत Angular.js, दृश्य पृष्ठ को लोड करता है क्योंकि यह एक सामान्य पृष्ठ था, फिर डोम की सामग्री लेता है और एकल पेड़ के पेड़ के साथ दृश्य पेड़ मर्ज करें।

मेरा सुझाव है कि आप दृश्य लोड करने के बाद $ .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; 
}