Chỉ thị AngularJS - các phương pháp hay nhất khi sử dụng ngModel với tiện ích jQuery

Question

Đây là vấn đề của tôi. Ví dụ, chúng tôi có các chỉ thị sau đây, trong đó sử dụng một số phụ tùng jQuery đằng sau hậu trường:

module.directive('myWidget', [function() { 
    return { 
     require: "ngModel", 
     restrict: "A", 
     replace: true, 
     templateUrl: "templates/myWidget.html", 
     link: function(scope, element, attrs, ctrl) { 
      element.widget_name().on('value_updated', function(event) { 
       scope.$apply(function() { 
        var newModelValue = event.some_value; 
        ctrl.$setViewValue(newModelValue); 
       }); 
      }); 

      scope.$watch(attrs["ngModel"], function(value){ 
       element.widget_name('set_value', value); 
      }); 
     } 
    }; 
}]); 

Vì vậy, nếu thay đổi giá trị của mô hình, sau đó xử lý được đăng ký sử dụng $ đồng hồ để nghe cho những thay đổi trong mô hình sẽ được thực thi và, do đó, phương thức 'set_value' của widget cũng sẽ được thực thi. Điều này có nghĩa là sự kiện 'value_updated' sẽ được kích hoạt.

Câu hỏi của tôi là: thực tiễn tốt nhất để thực hiện hành vi tương tự trong chỉ thị để tránh các cuộc gọi bổ sung của trình xử lý sự kiện DOM và trình theo dõi là gì?

Answer 1

Thay vì scope.$watch(), tôi khuyên bạn nên triển khai ctrl.$render(). $ render chỉ nên được gọi nếu một cái gì đó bên trong Angular thay đổi mô hình. Fiddle example.

Điều này giải quyết được vấn đề mà bạn không đề cập đến. Thật không may, nó không giải quyết được vấn đề bạn đã đề cập đến. Trong fiddle, một sự kiện blur bị ràng buộc, thay vì một số sự kiện widget.on(). Có lẽ điều đó sẽ phù hợp với bạn – tức là, chỉ cập nhật mô hình làm mờ, thay vì mọi phím tắt (điều này giả định rằng tiện ích của bạn đang chấp nhận tổ hợp phím).

Có thể bạn cũng có thể yêu cầu tác giả tiện ích cung cấp phương thức "đặt" không kích hoạt sự kiện. Sau đó, có thể được sử dụng trong phương thức $ render().