แสดงค่าโดยไม่มีการผูกข้อมูล

ใน AngularJS ฉันจะแสดงค่าโดยไม่มีการผูกข้อมูลแบบ 2 ทางได้อย่างไร เราอาจต้องการทำเช่นนี้ด้วยเหตุผลด้านประสิทธิภาพหรือแม้กระทั่งการแสดงค่า ณ ช่วงเวลาที่กำหนด

ทั้งสองตัวอย่างต่อไปนี้ใช้การผูกข้อมูล:

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

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

ฉันจะแสดงผลvalue โดยไม่มีการผูกข้อมูลได้อย่างไร

เชิงมุม 1.3+

ใน 1.3 Angular สนับสนุนสิ่งนี้โดยใช้ไวยากรณ์ต่อไปนี้

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

ดังที่กล่าวไว้ในคำตอบนี้ .

เชิงมุม 1.2 และต่ำกว่า

นี่เป็นเรื่องง่ายและไม่จำเป็นต้องมีปลั๊กอิน ลองดู.

คำสั่งเล็ก ๆ นี้จะทำให้สิ่งที่คุณพยายามบรรลุได้อย่างง่ายดาย

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

คุณสามารถผูกครั้งเดียวเช่นนี้

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

คุณสามารถผูกได้ตามปกติ

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

การสาธิต: http://jsfiddle.net/fffnb/

บางท่านอาจใช้ angular batarang และตามที่กล่าวไว้ในความคิดเห็นหากคุณใช้คำสั่งนี้องค์ประกอบยังคงแสดงว่ามีผลผูกพันเมื่อไม่ใช่ฉันค่อนข้างแน่ใจว่าสิ่งนี้เกี่ยวข้องกับคลาสที่แนบมากับองค์ประกอบดังนั้น ลองนี้มันควรจะทำงาน(ไม่ได้ทดสอบ) แจ้งให้เราทราบในความคิดเห็นหากได้ผลสำหรับคุณ

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

@ x0b : หากคุณมี OCD และต้องการลบclassแอตทริบิวต์ว่างให้ทำเช่นนี้

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

ดูเหมือนว่า Angular 1.3 (เริ่มต้นด้วยเบต้า 10) มีการผูกครั้งเดียวในตัว:

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

การผูกครั้งเดียว

นิพจน์ที่ขึ้นต้นด้วย :: ถือเป็นนิพจน์ครั้งเดียว นิพจน์แบบครั้งเดียวจะหยุดคำนวณใหม่เมื่อมีเสถียรภาพซึ่งจะเกิดขึ้นหลังจากการสรุปย่อยครั้งแรกหากผลลัพธ์ของนิพจน์เป็นค่าที่ไม่ได้กำหนด (ดูอัลกอริทึมการรักษาเสถียรภาพของค่าด้านล่าง)

ใช้โมดูล bindonce คุณจะต้องรวมไฟล์ JS และเพิ่มเป็นการอ้างอิงกับโมดูลแอปของคุณ:

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

ไลบรารีนี้อนุญาตให้คุณแสดงรายการที่ถูกผูกไว้เพียงครั้งเดียว - เมื่อเริ่มต้นครั้งแรก การอัปเดตเพิ่มเติมใด ๆ ของค่าเหล่านั้นจะถูกละเว้น เป็นวิธีที่ยอดเยี่ยมในการลดจำนวนนาฬิกาบนหน้าสำหรับสิ่งที่จะไม่เปลี่ยนแปลงหลังจากแสดงผล

ตัวอย่างการใช้งาน:

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

เมื่อใช้เช่นนี้คุณสมบัติภายใต้valueจะถูกตั้งค่าเมื่อพร้อมใช้งาน แต่นาฬิกาจะถูกปิดใช้งาน

การเปรียบเทียบระหว่างคำตอบของ @OverZealous และ @Connor:

ด้วย ngRepeat ดั้งเดิมของเชิงมุม: 15 วินาทีสำหรับ 2,000 แถวและ 420mo ของ RAM ( Plunker )

ด้วย ngRepeat และโมดูลของ @OverZealous: 7s สำหรับ 2,000 แถวและ 240mo ของ RAM ( Plunker )

ด้วย ngRepeat และคำสั่งของ @Connor: 8s สำหรับ 2,000 แถวและ 500mo ของ RAM ( Plunker )

ฉันทำการทดสอบกับ Google Chrome 32

นอกจากนี้ยังมีangular-onceแพ็คเกจ:

หากคุณใช้ AngularJS มีปัญหาด้านประสิทธิภาพและต้องแสดงข้อมูลแบบอ่านอย่างเดียวจำนวนมากโครงการนี้เหมาะสำหรับคุณ!

angular-onceได้รับแรงบันดาลใจจากbindonceและให้once-*คุณลักษณะที่คล้ายกัน:

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