Kết xuất giá trị mà không ràng buộc dữ liệu

Trong AngularJS, làm cách nào tôi có thể hiển thị một giá trị mà không có ràng buộc dữ liệu 2 chiều? Người ta có thể muốn làm điều này vì lý do hiệu suất, hoặc thậm chí hiển thị một giá trị tại một thời điểm nhất định.

Cả hai ví dụ sau đều sử dụng liên kết dữ liệu:

<div>{{value}}</div>

<div data-ng-bind="value"></div>

Làm cách nào để kết xuất value mà không có bất kỳ ràng buộc dữ liệu nào?

Góc 1.3+

Trong 1.3, Angular đã hỗ trợ điều này bằng cú pháp sau.

<div>{{::message}}</div>

Như đã đề cập trong câu trả lời này .

Angular 1.2 trở xuống

Điều này đơn giản và không cần plugin. Kiểm tra điều này.

Chỉ thị nhỏ này sẽ dễ dàng hoàn thành những gì bạn đang cố gắng đạt được

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope ) {
            setTimeout(function() {
                $scope.$destroy();
            }, 0);
        }
    }
});

Bạn có thể ràng buộc một lần như thế này

<div bind-once>I bind once - {{message}}</div>

Bạn có thể ràng buộc như bình thường

<div ng-bind="message" bind-once></div>

Demo: http://jsfiddle.net/fffnb/

Một số bạn có thể đang sử dụng batarang góc, và như đã đề cập trong phần nhận xét nếu bạn sử dụng chỉ thị này, phần tử vẫn hiển thị là ràng buộc khi không, tôi khá chắc chắn rằng điều này có liên quan đến các lớp được gắn với phần tử vì vậy hãy thử cái này, nó sẽ hoạt động (không thử nghiệm) . Hãy cho tôi biết trong phần bình luận nếu nó phù hợp với bạn.

app.directive('bindOnce', function() {
    return {
        scope: true,
        link: function( $scope, $element ) {
            setTimeout(function() {
                $scope.$destroy();
                $element.removeClass('ng-binding ng-scope');
            }, 0);
        }
    }
});

@ x0b : Nếu bạn có OCD và bạn muốn xóa classthuộc tính trống, hãy làm điều này

!$element.attr('class') && $element.removeAttr('class')

Có vẻ như Angular 1.3 (bắt đầu từ phiên bản beta 10) được tích hợp sẵn liên kết một lần:

https://docs.angularjs.org/guide/expression#one-time-binding

Ràng buộc một lần

Biểu thức bắt đầu bằng :: được coi là biểu thức một lần. Các biểu thức một lần sẽ ngừng tính toán lại khi chúng ổn định, điều này xảy ra sau lần thông báo đầu tiên nếu kết quả biểu thức là một giá trị không xác định (xem thuật toán ổn định giá trị bên dưới).

Sử dụng mô-đun bindonce . Bạn sẽ cần bao gồm tệp JS và thêm nó làm phụ thuộc vào mô-đun ứng dụng của bạn:

var myApp = angular.module("myApp", ['pasvaz.bindonce']);

Thư viện này cho phép bạn hiển thị các mục chỉ bị ràng buộc một lần - khi chúng được khởi tạo lần đầu tiên. Mọi cập nhật thêm cho các giá trị đó sẽ bị bỏ qua. Đó là một cách tuyệt vời để giảm số lượng đồng hồ trên trang cho những thứ sẽ không thay đổi sau khi chúng được hiển thị.

Ví dụ sử dụng:

<div bo-text="value"></div>

Khi được sử dụng như vậy, thuộc tính bên dưới valuesẽ được thiết lập khi nó có sẵn, nhưng sau đó đồng hồ sẽ bị vô hiệu hóa.

So sánh giữa câu trả lời @OverZtyles và @Connor:

Với ngRepeat of angle truyền thống: 15 giây cho 2000 hàng và 420mo RAM ( Plunker )

Với ngRepeat và mô-đun của @OverZionary: 7 giây cho 2000 hàng và 240 triệu RAM ( Plunker )

Với ngRepeat và chỉ thị của @Connor: 8 giây cho 2000 hàng và 500 triệu RAM ( Plunker )

Tôi đã thực hiện các bài kiểm tra của mình với Google Chrome 32.

Để thay thế, có angular-oncegói:

Nếu bạn sử dụng AngularJS, gặp vấn đề về hiệu suất và cần hiển thị nhiều dữ liệu chỉ đọc, thì dự án này là dành cho bạn!

angular-oncethực sự được lấy cảm hứng từ bindoncevà cung cấp các once-*thuộc tính tương tự :

<ul>
    <li ng-repeat="user in users">
      <a once-href="user.profileUrl" once-text="user.name"></a>
        <a once-href="user.profileUrl"><img once-src="user.avatarUrl"></a>
        <div once-class="{'formatted': user.description}" once-bind="user.description"></div>
    </li>
</ul>