ngModel - Cách xử lý hành vi khác nhau của nó trong các trình duyệt khác nhau?

Question

Tôi đang cố xử lý các hành vi khác nhau của ngModel trong các trình duyệt khác nhau.

Chỉ thị của tôi kết thúc tốt đẹp jqueryUI tự động hoàn thành và trên sự kiện select của nó gọi là ngModel.$setViewValue(selectedItem.id). Tự động hoàn tất cho phép người dùng chọn mục bằng cách nhấp chuột hoặc bằng cách nhấn enter trên bàn phím.

Nếu mục được đề xuất là:

{ 
    "name": "Apple", 
    "id": "1000" 
} 

Tôi hy vọng sau khi chọn nó, giá trị ngModel sẽ được lựa chọn item của id-1000.

• Trong Chrome nó hoạt động OK - nó đặt $viewValue và $modelValue một cách chính xác ($modelValue=1000).

• Trong Firefox nó đặt mô hình như trong Chrome ($modelValue=1000), nhưng khi tôi bấm một nơi khác - làm mờ (sau đó trình duyệt có thể bắn change sự kiện), thay đổi mô hình và nó trở nên giống như giá trị đầu vào có thể nhìn thấy ($modelValue='Apple').

• Trong IE 11, nó chỉ đặt đúng mô hình khi tôi chọn mục có nhấp chuột. Nếu tôi chọn nó bằng cách nhấn enter, mô hình trở nên giá trị đầu vào có thể nhìn thấy ($modelValue='Apple')

Đây là plunkr: http://plnkr.co/edit/o2Jkgprf8EakGqnpu22Y?p=preview

Tôi muốn để đạt được hành vi tương tự ở mọi trình duyệt. Làm thế nào để đối phó với những vấn đề đó?

Answer 1

Ok, tôi nghĩ rằng tôi đã thực hiện nó. Giải pháp dựa trên Yoshi's comment và sử dụng mô hình cục bộ để giữ dữ liệu được chọn.

Khi người dùng chọn thứ gì đó, mô hình cục bộ được đặt thành Object và $viewValue được chọn được đặt thành giá trị văn bản của mục đã chọn. Sau đó, trình phân tích cú pháp đặt id thuộc tính của mô hình địa phương là $modelValue.

select: function(event, ui) { 
    if(ui.item && ui.item.data){ 
    model = ui.item.data 
    ngModel.$setViewValue(model.name); 
    scope.$apply(); 
    } 
} 

ngModel.$parsers.push(function(value) { 
    if(_.isObject(model) && value!==model.name){ 
    model = value; 
    return model; 
    } 
    return model.id; 
}); 

Chức năng trình phân tích cú pháp cũng là một điều quan trọng. Bởi vì nó chạy khi người dùng gõ một cái gì đó hoặc trên sự kiện change (đó là vấn đề trong firefox!), Nó sẽ kiểm tra nếu giá trị giống như giá trị văn bản của mô hình cục bộ hiện tại, và nếu không thay đổi mô hình cục bộ thành giá trị này. Nó có nghĩa là nếu hàm phân tích cú pháp được chạy bởi change giá trị sự kiện sẽ giống như giá trị văn bản, vì vậy $modelValue không thay đổi, nhưng nếu người dùng nhập mô hình nào đó được cập nhật thành giá trị đã nhập (nó sẽ trở thành String).

Chức năng xác thực kiểm tra xem mô hình địa phương có là Object hay không. Nếu không có nghĩa là trường đó không hợp lệ, theo mặc định, $modelValue biến mất.

Đây là plunkr: http://plnkr.co/edit/2ZkXFvgLIwDljfJoyeJ1?p=preview

(Trong chức năng định dạng tôi trở lại rằng điều gì sẽ đến, vì vậy $viewValue tạm thời một Object nhưng sau đó trong $render phương pháp tôi gọi $setViewValue thiết $viewValue và $modelValue một cách chính xác, vì vậy nó trở thành String Tôi nghe thấy $setViewValue không nên chạy theo phương thức $render, nhưng tôi không thấy cách khác để đặt chính xác $modelValue khi có gì đó từ bên ngoài).

Answer 2

này dường như có liên quan đến http://bugs.jqueryui.com/ticket/8878

Như đã chỉ ra trong liên kết ở trên, sự kiện thay đổi được kích hoạt chỉ trong Firefox và không có trong Chrome. Vì vậy, trong trường hợp của bạn, $ setViewValue lại được kích hoạt khi được nhấp vào bên ngoài và giá trị mô hình được đặt thành "Apple".

Có thay đổi gọi lại cho tiện ích jquery ui tự động hoàn thành. Để xử lý cả hai trường hợp/trình duyệt có thể bạn sẽ phải đặt lại giá trị xem một cách rõ ràng trên cuộc gọi này trở lại (và nó hoạt động).

http://plnkr.co/edit/GFxhzwieBJTSL8zjSPSZ?p=preview

link: function(scope, elem, attrs, ngModel) { 
     elem.on('change', function(){ 
     // This will not be printed in Chrome and only on firefox 
     console.log('change'); 
    }); 


    select: function(event, ui) { 
     ngModel.$setViewValue(ui.item.data.id); 
     scope.$apply(); 
    }, 
    // To handle firefox browser were change event is triggered 
    // when clicked outside/blur 
    change: function(event, ui) { 
     ngModel.$setViewValue(ui.item.data.id); 
     scope.$apply(); 
    } 

Answer 3

tôi đã chiến đấu tương tự với ngModelController và $setViewValue.

Cuối cùng tôi đã tìm các giải pháp thay thế. Một cách tiếp cận mà tôi đã tìm thấy hoạt động khá tốt là tạo một phần tử mới làm chỉ thị thành phần bao gồm thẻ đầu vào như một phần tử được nhúng.

app.directive('fruitAutocomplete', function($http) { 
    return { 
    restrict: 'E', 
    require: 'ngModel', 
    transclude: true, 
    template: '<ng-transclude></ng-transclude>', 
    link: function(scope, elem, attrs, ngModelController) { 
     var $input = elem.find('input'); 

     $input.autocomplete({ 
     ... 
     }); 
    } 
    } 
}) 

Trong HTML:

<fruit-autocomplete name="fruit" ng-model="model.fruit"> 
    <input ng-disabled="inputDisabled" placeholder="input fruit"/> 
</fruit-autocomplete> 

Dưới đây là một Plunker

làm việc Với giải pháp đề xuất này bạn có thể cô lập các ngModelController và phương thức tương jQueryUI đến yếu tố tùy chỉnh riêng của mình và nó không can thiệp vào thẻ "bình thường" <input> và bạn không lo ngại về lỗi jQueryUI.

Bằng việc sử dụng thẻ <input> như yếu tố nhúng bạn vẫn có thể được hưởng lợi từ hầu hết các goodies đầu vào góc như ng-disabled, placeholder, vv ...