Sử dụng một Plugin jQuery trong AngularJS View

Question

Tôi đang làm việc với dự án AngularJS đầu tiên của mình. Tôi yêu nó cho đến nay, nhưng bây giờ tôi đã gác máy.

Dự án của tôi được cấu trúc để tôi có một chế độ xem ng trong index.html của tôi được điền bằng mẫu HTML/phần riêng biệt dựa trên tuyến đường hiện tại.

Trong một trong những partials Tôi muốn sử dụng jQuery DateFormat plugin để định dạng một chuỗi SQLite datetime mà được phân tách thành các mẫu/một phần sử dụng một biểu thức góc:

{{ find.addDate }} 

Tôi đã bao gồm các plugin với một thẻ script trong index.html và tôi nghĩ từ đó nó sẽ là đơn giản như làm một cái gì đó như thế này trong mẫu của tôi/phần:

{{ $.format.date(find.addDate, "dd/MM/yyyy") }} 

Hoặc có thể:

{{ angular.element.format.date(find.addDate, "dd/MM/yyyy") }} 

Điều đó không có tác dụng (tôi chắc chắn đó là lý do tại sao đối với một số bạn), nhưng không có lỗi trong bảng điều khiển và tôi khá bối rối về cách tiếp cận nó. Tôi đã thực hiện một số Googling với các cụm từ như 'kịch bản bên thứ ba trong góc' hoặc 'jquery plugin angularjs', vv nhưng không thể tìm thấy các ví dụ mã gần đây về cách thực hiện điều này đúng cách.

Tôi đã tìm thấy một số mã cũ hơn bằng cách sử dụng angular.widget, nhưng có vẻ như nó không được dùng nữa trong phiên bản 1.0+. Tôi nghĩ rằng tôi cần phải sử dụng một chỉ thị, nhưng tôi không thể tìm ra chính xác.

Tôi thực sự hy vọng cho một lời giải thích hoặc ví dụ đơn giản xin vui lòng. Cảm ơn rất nhiều!

Answer 1

Vấn đề là khi bạn thực hiện {{expression}} trong một mẫu, nó sẽ đánh giá nó trên phạm vi hiện tại.

Ví dụ, nếu bạn có điều khiển này:

function MyCtrl($scope) { 
    $scope.find = { 
     addDate: 2030 
    }; 
} 

{{find.addDate}} sẽ trong thực tế nhìn cho $scope.find.addDate và đánh giá nó (trong trường hợp này trở về 2030).

Vì vậy, khi bạn cố gắng làm {{ $.format.date(find.addDate, "dd/MM/yyyy") }}, giao diện góc cho $scope.$.format.date(find.addDate, "dd/MM/yyyy"), không tồn tại.

Hãy thử một cái gì đó như thế này thay vào đó, sử dụng một chức năng trong điều khiển của bạn:

function MyCtrl($scope) { 
     $scope.find = { 
      addDate: 2030 
     }; 
     $scope.formatDate = function(input, format) { 
      return $.format.date(input, format); 
     } 
    } 

Và sau đó bạn có thể làm trong html của bạn, bạn có thể làm: {{formatDate(find.addDate, "dd/MM/yyyy")}}.

Bạn cũng có thể đánh giá nó như một bộ lọc trong đánh dấu của bạn, vì nó chỉ mất một đầu vào và thay đổi nó: {{find.addDate | formatDate:"dd/MM/yyyy"}}