Sử dụng webshims polyfill trong ứng dụng Góc

Question

Tôi đang cố sử dụng webshims polyfill trong ứng dụng góc cạnh, cũng đang sử dụng requirejs để quản lý phụ thuộc. Tôi đang cố gắng giảm bớt sự thiếu vắng thuộc tính form trong các trường biểu mẫu như input và button, cho trình duyệt biết hình thức một nút hoặc đầu vào cụ thể thuộc về. IE9 thiếu tính năng này.

Tôi đã tìm ra cách tốt nhất để sử dụng polyfill này là tạo chỉ thị biểu mẫu và gọi hàm $.webshims.polyfill('forms') bên trong hàm liên kết.

Chỉ thị

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'); 
     } 
     } 
    }; 
    } 
]); 

Dưới đây là cách tôi đang tải webshims polyfill ngay bây giờ:

My Requirejs cấu hình

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'] 
    } 
    } 
} 

Cái này là mặc dù tải shim, và thậm chí gọi chức năng chính xác, shims dường như không hoạt động, vì IE9 vẫn gặp sự cố với thuộc tính Biểu mẫu HTML5 (trình giữ chỗ, các thuộc tính , v.v.

Tôi thiếu gì ở đây?

Answer 1

Tôi không có kinh nghiệm với góc cạnh, vì vậy tôi không biết thời tiết của bạn để làm điều này trong một chỉ thị "hình thức" là đúng (Nhưng tôi nghi ngờ nó).

Nhưng trước tiên: đăng ký tệp webfims polyfiller dưới dạng mô-đun amd được đặt tên được gọi là 'polyfiller'. Nó sẽ là tốt để đổi tên webshims của bạn vào polyfiller

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

và:

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

bên trong chức năng xác định của bạn, bạn cũng nên thiết lập các basePath một cách chính xác trước khi bạn đang gọi phương thức polyfill:

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

Tự động lấy nét và giữ chỗ được hỗ trợ trong IE10, nhưng thuộc tính biểu mẫu không hỗ trợ ngay cả trong IE11. Vì vậy, bạn nên loại bỏ các bài kiểm tra Modernizr.

Vì vậy, hãy xem vấn đề hiện tại của bạn là gì.

Bạn có thể chạy mã sau trong bảng điều khiển của IE9 webshims.isReady('forms') không?

Nếu đúng: Nếu biểu mẫu đã sẵn sàng, hãy chạy mã follwing trong bảng điều khiển của IE9 $('body').updatePolyfill(). Điều này có hữu ích không?

Nếu sai: Chạy đoạn mã sau vào của IE9 của bạn console webshims.modules["form-core"].loaded

Liệu nó trở thành sự thật hoặc không xác định/sai.

Nếu trả về không xác định/sai: Đảm bảo rằng a) webshims.polyfill ('biểu mẫu'); thực sự được gọi và b) không có lỗi mạng -> Tệp được tải mà không có 404 cũng thấy cấu hình basePath ở trên.

---

Something về webshims tải và thực hiện:

Thông thường bạn nên tải webshims một lần vào Khởi tạo ứng dụng của bạn. Và sau đó mỗi lần xem của bạn thay đổi, bạn nên gọi .updatePolyfill trên phần tử dom đã thay đổi.

Một số khung công tác có các sự kiện đặc biệt cho việc này. Ví dụ jQuery mobile sử dụng sự kiện pageinit.

Trong trường hợp này (jQM), bạn sẽ viết:

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

Trong một số khuôn khổ bạn cần phải sử dụng một setTimeout:

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

Answer 2

Chỉ cần chạy vào vấn đề này bản thân mình và tôi nghĩ rằng tôi có một giải pháp đơn giản có vẻ hoạt động tốt:

Chỉ cần gọi phương thức updatePolyFill từ bộ điều khiển của trang chỉ mục chính của bạn sau khi lượt xem tải:

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

Bí quyết là rằng sự kiện này bong bóng lên từ quan điểm trong khối ng-view, do đó bạn cần phải làm điều này trong bộ điều khiển trên quan điểm cho rằng, không phải trong bộ điều khiển của xem. Ngoài ra, tôi đoán, nó không nên được gọi nếu nó không phải là polyfilling đã có, không chắc chắn làm thế nào để làm điều đó được nêu ra và nó không xuất hiện xung đột ở tất cả các thử nghiệm với Chrome mà không cần polyfills cho những gì tôi đang làm (điều khiển biểu mẫu chỉ có).