एक कोणीय ऐप

Question

में webshims polyfill का उपयोग करके मैं एक कोणीय ऐप में webshims polyfill का उपयोग करने का प्रयास कर रहा हूं, जो निर्भरता प्रबंधन के लिए requjs का भी उपयोग कर रहा है। मैं की अनुपस्थिति को input और button जैसे फॉर्म फ़ील्ड में अनुपस्थित करने की कोशिश कर रहा हूं, जो ब्राउज़र को बताता है जो एक विशेष बटन या इनपुट से संबंधित है। आईई 9 में इस सुविधा की कमी है।

मुझे लगा कि इस पॉलीफिल का उपयोग करने का सबसे अच्छा तरीका एक फॉर्म निर्देश बनाना होगा, और लिंक फ़ंक्शन के अंदर $.webshims.polyfill('forms') का आह्वान करना होगा।

निर्देश

define(['angular', 'webshims'], function(angular) { 
    return angular.module('myApp').directive('form', ['$window', function($window) { 
    return { 
     restrict: 'E', 
     scope: false, 
     link: function($scope, iElement, iAttrs) { 
     if (!(window.Modernizr.input.placeholder || window.Modernizr.input.autofocus)) { 
      $.webshims.setOptions({ 
      waitReady: false 
      }); 
      $.webshims.polyfill('forms'); 
     } 
     } 
    }; 
    } 
]); 

यहाँ है कि कैसे मैं लोड हो रहा हूँ webshims अभी polyfill:

मेरे Requirejs config

app: { 
    options: { 
    baseUrl: 'src/apps', 
    stubModules: ['cs'], 
    paths: { 
     jquery: '../public/components/jquery/jquery', 
     .... 
     angular: '../public/components/angular/angular', 
     .... 
     webshims: '../public/components/webshim/src/polyfiller', 
    }, 
    shim: { 
     angular: { 
     deps: ['jquery'], 
     exports: 'angular' 
     }, 
     ... 
     priority: ['angular'] 
    } 
    } 
} 

बात यह है कि यहां तक ​​कि शिम भार हालांकि, और यहां तक ​​कि कहता है सही कार्य, shims काम नहीं कर रहे हैं, क्योंकि IE9 में अभी भी HTML5 फॉर्म विशेषताओं (प्लेसहोल्डर, फॉर्म विशेषता, आदि) के साथ समस्याएं हैं

मुझे यहाँ क्या याद आ रही है?

Answer 1

मुझे कोणीय के साथ कोई अनुभव नहीं है, इसलिए मुझे यह नहीं पता कि "फॉर्म" निर्देश में ऐसा करने के लिए आपके उतरने को गीला करना सही है (लेकिन मुझे शक है)।

लेकिन पहले: webshims polyfiller फ़ाइल नामांकित एएमडी मॉड्यूल के रूप में पंजीकृत है जिसे 'पॉलीफिलर' कहा जाता है।

webshims.setOptions({ 
    waitReady: false, 
    basePath: '../public/components/webshim/src/shims/' 
}); 

:

polyfiller: '../public/components/webshim/src/polyfiller', 

अपने को परिभाषित समारोह आप भी basePath सही ढंग से इससे पहले कि आप polyfill विधि बुला रहे हैं स्थापित करना चाहिए के अंदर

: यह

define(['angular', 'polyfiller'], function(angular) 

और polyfiller में अपने webshims नाम बदलने के लिए अच्छा होगा

इसके अतिरिक्त ऑटोफोकस और प्लेसहोल्डर IE10 में समर्थित हैं, लेकिन फॉर्म विशेषता आईई 11 में भी समर्थित नहीं है। तो आपको Modernizr परीक्षण को हटा देना चाहिए।

तो चलिए देखते हैं कि आपकी वर्तमान समस्या क्या है।

क्या आप IE9 के कंसोल webshims.isReady('forms') में निम्न कोड चला सकते हैं?

यदि सही है: यदि फॉर्म तैयार हैं, तो IE9 के कंसोल $('body').updatePolyfill() में follwing कोड चलाएं। क्या इससे मदद मिलती है?

झूठे हैं: अपने IE9 के कंसोल webshims.modules["form-core"].loaded

में निम्न कोड चलाएँ यह सच या अपरिभाषित/गलत वापसी करता है।

यदि यह अपरिभाषित/गलत लौटाता है: सुनिश्चित करें कि ए) webshims.polyfill ('form'); वास्तव में कहा जाता है और बी) कोई नेटवर्क त्रुटि नहीं है -> फ़ाइल 404 के बिना लोड की गई है, ऊपर बेसपैथ कॉन्फ़िगर भी देखें।

---

webshims लदान और क्रियान्वित करने के बारे में कुछ:

आम तौर पर आप अपने अनुप्रयोग प्रारंभ करने पर एक बार webshims लोड करना चाहिए। और फिर जब भी आपका दृश्य बदलता है तो आपको बदलते हुए डोम तत्व पर .updatePolyfill का आह्वान करना चाहिए।

कुछ ढांचे के लिए इसके लिए विशेष कार्यक्रम हैं। उदाहरण के लिए jQuery मोबाइल पेजिनिट ईवेंट का उपयोग करता है।

इस मामले (jQM) में आप लिखना होगा:

$(document).on('pageinit', function(e){ 
    $(e.target).updatePolyfill(); 
}); 

कुछ चौखटे में आप एक setTimeout का उपयोग करने की जरूरत है: अपने आप

render: function(target){ 
    setTimeout(function(){ 
     $(target).updatePolyfill(); 
    }, 0); 
} 

Answer 2

बस इस मुद्दे में भाग गया और मुझे लगता है कि मैं एक है सरल समाधान जो ठीक काम करता प्रतीत होता है:

व्यू लोड के बाद बस अपने मुख्य अनुक्रमणिका पृष्ठ के नियंत्रक से अद्यतन पॉलीफ़िल विधि को कॉल करें:

//Polyfill needs update when dynamic view loads 
$scope.$on('$viewContentLoaded', function() { 
    $('body').updatePolyfill(); 
}); 

चाल इस घटना बुलबुले कि अप एनजी-व्यू ब्लॉक में दिखाने से है ताकि आप के नियंत्रक में नहीं है कि दृश्य के ऊपर नियंत्रक में ऐसा करने के लिए, की जरूरत है। साथ ही, मुझे लगता है कि इसे पहले से पॉलीफिलिंग नहीं किया जाना चाहिए, यह सुनिश्चित नहीं है कि यह कैसे करना है और यह क्रोम के साथ सभी परीक्षणों पर संघर्ष नहीं दिख रहा है, जिसके लिए मैं जो कर रहा हूं उसके लिए कोई पॉलीफिल की आवश्यकता नहीं है (फॉर्म नियंत्रण केवल)।