ฉันใช้การกำหนดเส้นทางของ AngularUI และฉันต้องการทำng-class="{active: current.state}"
แต่ฉันไม่แน่ใจว่าจะตรวจจับสถานะปัจจุบันได้อย่างไรในคำสั่งเช่นนี้
ฉันใช้การกำหนดเส้นทางของ AngularUI และฉันต้องการทำng-class="{active: current.state}"
แต่ฉันไม่แน่ใจว่าจะตรวจจับสถานะปัจจุบันได้อย่างไรในคำสั่งเช่นนี้
คำตอบ:
นอกจากนี้คุณสามารถใช้คำสั่งui-sref-active :
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="app.user({user: 'bilbobaggins'})">@bilbobaggins</a>
</li>
<!-- ... -->
</ul>
หรือตัวกรอง:
"stateName" | isState
&"stateName" | includedByState
อัปเดต:
คำตอบนี้มีไว้สำหรับ Ui-Router รุ่นเก่ากว่ามาก สำหรับรุ่นล่าสุดมากขึ้น (0.2.5+) ui-sref-active
กรุณาใช้คำสั่งผู้ช่วย รายละเอียดที่นี่ .
คำตอบเดิม:
รวมบริการ $ state ไว้ในคอนโทรลเลอร์ของคุณ คุณสามารถกำหนดบริการนี้ให้กับคุณสมบัติในขอบเขตของคุณ
ตัวอย่าง:
$scope.$state = $state;
จากนั้นเพื่อรับสถานะปัจจุบันในเทมเพลตของคุณ:
$state.current.name
ในการตรวจสอบว่าสถานะปัจจุบันทำงานอยู่หรือไม่:
$state.includes('stateName');
วิธีนี้จะคืนค่าจริงหากรวมสถานะแม้ว่าจะเป็นส่วนหนึ่งของสถานะซ้อนกันก็ตาม หากคุณอยู่ในสถานะซ้อนกันuser.details
และคุณตรวจสอบ$state.includes('user')
แล้วมันจะกลับมาเป็นจริง
ในตัวอย่างชั้นเรียนของคุณคุณจะทำสิ่งนี้:
ng-class="{active: $state.includes('stateName')}"
หากคุณใช้ ui-router ให้ลอง $ state.is ();
คุณสามารถใช้มันดังนี้:
$state.is('stateName');
$ state.is ... คล้ายกับ $ state.includes แต่จะตรวจสอบชื่อเต็มของรัฐเท่านั้น
การใช้คำสั่งui-sref-activeที่เหมาะกับฉันคือ:
<li ui-sref-active="{'active': 'admin'}">
<a ui-sref="admin.users">Administration Panel</a>
</li>
ตามที่พบที่นี่ใต้ความคิดเห็นที่มีข้อความว่า "tgrant59 แสดงความคิดเห็นเมื่อวันที่ 31 พฤษภาคม 2016"
ฉันใช้ angular-ui-router v0.3.1
ตรวจสอบ angular-ui โดยเฉพาะการตรวจสอบเส้นทาง: http://angular-ui.github.io/ui-utils/