يقوم جهاز توجيه واجهة المستخدم بملء رابط القالب ووحدات التحكم بحالات مجردة متداخلة مع طرق عرض متداخلة

Question

لقد قمت بالتجربة ui-router ولقد واجهت القليل من الغرابة.لا أستطيع ملء طريقة عرض تحت حالة مجردة.يبدو أنه بينما تكون الحالة نشطة، لم يتم العثور على العرض

هنا مثال :

مزود الدولة :

$stateProvider
.state('search', {
    abstract: true,
    url: '',
    views: {
        '@': { 
            templateUrl: 'app/views/layout.html',
        },
        'full-page@search': {
            templateUrl : 'app/views/search/search.html',
        }
    }
})

//------------------------------------------------------------
// Search list view
//------------------------------------------------------------
.state('search.list', {
    url: '/search/users',
    views: {
        'content-container@search' : {
            templateUrl : 'app/views/search/user.list.html',
            controller  : 'SearchResults',
        }
    }
})

//------------------------------------------------------------
// Search view of one users's details
//------------------------------------------------------------
.state('search.user', {
    abstract : true,
    url: '/search/usr/{userId}',
    views: {
        'content-container@search' : {
            templateUrl: 'app/views/user/user.detail.html',
            controller : 'UserController', 
        },
    }
})

//------------------------------------------------------------
// View of the user's details
//------------------------------------------------------------
.state('search.user.view', {
    url : '',
    views: {
        'left-column@search' : { 
            templateUrl : 'app/views/user/user.detail.view.html',
            controller  : 'UserEditController',
        }
    }
})`

لغة البرمجة:

الفهرس.html :

<div> <div ui-view></div> </div>

تخطيط.html :

<div> <div ui-view='full-page'></div> </div>

بحث.html :

<div> <div ui-view='content-container'></div> </div>

user.list.html :

<div> <ul> <li ng-repeat="user in users"> <a ui-sref='search.user.view({userId : user.userId})'></a> </li> </ul> </div>

user.detail.html :

<div> <div ng-view="left-column"></div> <div ng-view='right-column'></div>
</div>

user.detail.view.html :

<div> User information </div>

تدفق حالة الصفحة الذي أحاول الحصول عليه هو:

1) التحميل الأولي للموقع لقائمة البحث (التي تصل إلى

• 1.أ:حمولة layout.html في عرض واجهة المستخدم الافتراضي في Index.html عبر العرض "@"
• 1.ب: search.html يتم تحميله عبر عرض "الصفحة الكاملة" في Layout.html، ثم
• 1.ج: user.list.html يتم تحميله عن طريق content-container@search عرض في حالة قائمة البحث.هذا يعمل بشكل جيد ومدهش

2) النقر على القائمة التي تم إنشاؤها في user.list.html يقوم بتحميل search.user.view الذي ينبغي؟فقاعة العودة إلى search.user،

• 2. الحمل user.detail.html في ال content-container@search عرض search.html، ثم (هذا يعمل)
• 2.ب التحميل user.detail.view.html في ال ui-view='left-column' شعبة user.detail.html.(هذا لا يعمل، يتم ترك عرض "العمود الأيسر" فارغًا.)

اعتقدت في الأصل أن هذا الرمز يؤدي نفس النمط من مجموعة عرض واجهة المستخدم للحالة المجردة مرتين (مرة لقائمة المستخدم، والأخرى لـ user.detail.view) ومع ذلك، يبدو أن هذا ليس هو الحال.يبدو الأمر كما لو أن "left-column" يتم البحث عن طريقة العرض قبل ملء حاوية المحتوى

أنا جديد على جهاز توجيه واجهة المستخدم، لذا قد يكون لدي فكرة خاطئة عن تسلسل كيفية نشر الحالات المجردة أو الاستخدام المقصود للحالات المجردة.

Answer 1

أنت على وشك الوصول - هنا الغطاس العمل.التغييرات التي قمت بها

user.detail.html

ليس عرض نانوغرام لكن ui-view

<div> 
   //<div ng-view="left-column"></div> 
   //<div ng-view='right-column'></div>
   <div ui-view="left-column"></div> 
   <div ui-view='right-column'></div>
</div>

الدولة "search.user.view"

الجزء بعد @ المحدد يجب أن يكون اسم أ ولاية عقد هذا العرض واجهة المستخدم - وهو ليس كذلك يبحث لكن search.user.كما أظهر على right-column أدناه - إذا كان هذا هو الوالد بالفعل ...يمكننا تخطيها (سيتم ذلك لنا خلف الكواليس)

.state('search.user.view', {
    url : '',
    views: {
        // 'left-column@search' : { 
        'left-column@search.user' : { 
           ...
        },
        'right-column@' : { 
           ...
        }
    }

تحقق من مثال العمل هنا