Angular lazy การผูกครั้งเดียวสำหรับนิพจน์

AngularJS มีคุณสมบัติใหม่ตั้งแต่รุ่น 1.3.0-beta.10 ที่: "ขี้เกียจเพียงครั้งเดียวที่มีผลผูกพัน"

นิพจน์ทั่วไปสามารถนำหน้าโดย::บอกให้เชิงมุมหยุดดูหลังจากที่นิพจน์ได้รับการประเมินครั้งแรก ตัวอย่างทั่วไปที่ให้ไว้มีดังนี้:

<div>{{::user.name}}</div>

มีไวยากรณ์ที่คล้ายกันสำหรับนิพจน์ดังต่อไปนี้หรือไม่

<div ng-if="user.isSomething && user.isSomethingElse"></div>
<div ng-class="{classNameFoo: user.isSomething}"></div>

— Seldary
แหล่งที่มา

อ้างอิงเอกสารเชิงมุมสำหรับคำอธิบายโดยละเอียด: docs.angularjs.org/guide/expression#one-time-binding

— Akshay Gundewar

160

ใช่. คุณสามารถนำหน้าทุกนิพจน์::ได้แม้กระทั่งนิพจน์ในngIfหรือngClass:

<div ng-if="::(user.isSomething && user.isSomethingElse)"></div>
<div ng-class="::{classNameFoo: user.isSomething}"></div>

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

— หลุมดำ
แหล่งที่มา

มันตอบคำถามของฉันแม้ว่าคุณสมบัติใหม่บางอย่างจะทำงานได้ไม่ดี: <div ng-if="::user.isSomething"></div>และ<div ng-if="::(!user.isSomething)"></div>ทั้งสองอย่าง ใช้งานได้โดยไม่มี "::"

— Seldary

@ เซลดารีฉันไม่สามารถสร้างปัญหาซ้ำได้ ทุกนิพจน์ที่นำหน้า::ทำงานได้ดีสำหรับฉันตามที่อธิบายไว้ในการแก้ไขของฉัน คุณสามารถทำซอได้หรือไม่หากมีข้อสงสัย?

— Blackhole

ตอนแรกดูเหมือนว่าจะไม่ได้ผลสำหรับฉันด้วย ngClass ที่มีการกำหนดหลายคลาส ฉันพบอย่างรวดเร็วว่าการโยงยังคงถูกผูกไว้เนื่องจากยังไม่ได้กำหนดตัวแปรเฝ้าดูบางตัวที่ใช้ใน ngClass (และเรารู้ว่าเชิงมุมจะรอให้กำหนดค่าก่อนที่จะปล่อยผู้เฝ้าดู) นี่คือไวโอลินขนาดเล็กที่จะแสดงให้เห็นถึงพฤติกรรมนี้jsfiddle.net/2LkyLoop

— Denis Pshenov

@MaxRocket bindonce ไวยากรณ์ถูกเพิ่มในเชิงมุม 1.3 ดังนั้นมันจะไม่ทำงานใน 1.2 หรือต่ำกว่า

— Berty

การผูก ng-if เพียงครั้งเดียวดูเหมือนจะใช้ไม่ได้ จำนวนผู้เฝ้าดูสูงมากโดยมีหรือไม่มี::. มันทำงานได้ดีสำหรับ ng-class แต่ดูเหมือนว่า ng-if จะไม่เชื่อฟังการผูกครั้งเดียวสำหรับฉัน (1.5.6) โปรดทราบว่าฉันกำลังพยายามผูกคุณสมบัติอ็อบเจ็กต์ทางเดียวที่มาจาก ng-repeat ไม่แน่ใจว่าจะสร้างความแตกต่างหรือไม่

— AgmLauncher