Render nilai tanpa pengikatan data

Di AngularJS, bagaimana cara membuat nilai tanpa pengikatan data 2 arah? Seseorang mungkin ingin melakukan ini untuk alasan kinerja, atau bahkan memberikan nilai pada titik waktu tertentu.

Contoh berikut menggunakan data binding:

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

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

Bagaimana cara merender value tanpa pengikatan data?

Angular 1.3+

Di 1.3, Angular telah mendukung ini menggunakan sintaks berikut.

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

Seperti yang disebutkan dalam jawaban ini .

Angular 1.2 ke bawah

Ini sederhana dan tidak membutuhkan plugin. Lihat ini.

Arahan kecil ini akan dengan mudah mencapai apa yang ingin Anda capai

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

Anda bisa mengikat sekali seperti ini

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

Anda bisa mengikat seperti biasa

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

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

Beberapa dari Anda mungkin menggunakan batarang bersudut, dan seperti yang disebutkan di komentar jika Anda menggunakan arahan ini, elemen tersebut masih menunjukkan mengikat padahal tidak, saya cukup yakin ini ada hubungannya dengan kelas yang dilampirkan ke elemen jadi coba ini, itu harus bekerja (tidak diuji) . Beri tahu saya di komentar jika itu berhasil untuk Anda.

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

@ x0b : Jika Anda memiliki OCD dan Anda ingin menghapus classatribut kosong lakukan ini

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

Sepertinya Angular 1.3 (dimulai dengan beta 10) memiliki pengikatan satu kali bawaan:

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

Penjilidan satu kali

Ekspresi yang dimulai dengan :: dianggap sebagai ekspresi satu kali. Ekspresi satu kali akan berhenti menghitung ulang setelah stabil, yang terjadi setelah intisari pertama jika hasil ekspresi adalah nilai yang tidak ditentukan (lihat algoritme stabilisasi nilai di bawah).

Gunakan modul bindonce . Anda harus menyertakan file JS dan menambahkannya sebagai dependensi ke modul aplikasi Anda:

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

Pustaka ini memungkinkan Anda untuk merender item yang terikat hanya sekali - saat pertama kali diinisialisasi. Setiap pembaruan lebih lanjut untuk nilai-nilai tersebut akan diabaikan. Ini cara yang bagus untuk mengurangi jumlah jam tangan di halaman untuk hal-hal yang tidak akan berubah setelah dirender.

Contoh penggunaan:

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

Jika digunakan seperti ini, properti di bawah valueakan disetel setelah tersedia, tetapi jam tangan akan dinonaktifkan.

Perbandingan antara jawaban @OverZealous dan @Connor:

Dengan ngRepeat tradisional dari sudut: 15 detik untuk 2000 baris dan 420 bulan RAM ( Plunker )

Dengan ngRepeat dan modul @OverZealous: 7s untuk 2000 baris dan 240 bulan RAM ( Plunker )

Dengan ngRepeat dan direktif @Connor: 8s untuk 2000 baris dan 500 bulan RAM ( Plunker )

Saya melakukan pengujian dengan Google Chrome 32.

Sebagai alternatif, ada angular-oncepaket:

Jika Anda menggunakan AngularJS, memiliki masalah kinerja dan perlu menampilkan banyak data hanya-baca, proyek ini cocok untuk Anda!

angular-oncesebenarnya terinspirasi oleh bindoncedan memberikan once-*atribut serupa :

<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>