عرض متداخل لجهاز توجيه واجهة المستخدم الزاوي
-
21-12-2019 - |
سؤال
أحاول إدخال عرض متداخل في طريقة العرض العادية باستخدام جهاز التوجيه ui.أعلم أن ذلك ممكن عن طريق القيام بـ ng-include.لكني أريد حلها باستخدام ui-router.
HTML الخاص بي هو كما يلي:
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Project todos</div>
<div class="panel-body">
<div ui-view="todos"></div>
</div>
</div>
</div>
</div>
ثم في النص الخاص بي حصلت على حالة:
.state('project', {
url: '/project/:projectId',
templateUrl: 'views/project/project.html',
controller: 'ProjectCtrl',
views: {
'todos': {
templateUrl: 'views/project/todos.html'
}
}
})
تحديث - أليس هناك شيء من هذا القبيل ممكن؟
.state('project', {
url: '/project/:projectId',
templateUrl: 'views/project/project.html',
controller: 'ProjectCtrl',
views: {
'todos@project': {
templateUrl: 'views/project/todos.html'
}
}
})
يمكن لأي شخص العثور على خطأ مطبعي أو شيء من هذا؟لقد قرأت المستندات.لست متأكدا ما هو الخطأ.
شكرا لك مقدما!
المحلول
هناك عمل الغطاس, ، موضحًا كيف يمكننا تشغيله
في ملف Index.htm نحتاج إلى الحصول على ملف <div ui-view="" ></div>
, وهو المكان الذي أدخلنا فيه project.html.ثم نقوم بتعديل تعريف الحالة، لإدخال عرض متداخل أيضًا - باستخدام ui-view
التسمية المطلقة:
.state('project', {
url: '/project/:projectId',
views: {
'' : {
templateUrl: 'views.project.project.html',
controller: 'ProjectCtrl',
},
'todos@project': {
templateUrl: 'views.project.todos.html'
}
}
});
الاسم المطلق todos@project
, ، سوف يقوم بإدخال todos.html في project.html.افحص ال الغطاس
انظر:
اقتباس:
...خلف الكواليس، يتم تعيين اسم مطلق لكل عرض يتبع مخططًا
viewname@statename
, ، حيث viewname هو الاسم المستخدم في توجيه العرض واسم الحالة هو الاسم المطلق للحالة، على سبيل المثال.contact.item.يمكنك أيضًا اختيار كتابة أسماء طرق العرض الخاصة بك في الصيغة المطلقة...