2016-05-14 2 views
0

私は、角-UI-ルータのこの設定を持っている:同じビューテンプレートの詳細を繰り返さないように抽象的な状態の間にある方法はありますか?

var rootSubjectsSubjectAdminWordsWord = { 
    name: 'r.s.s.a.w.w', 
    template: "<div ui-view='wordData'></div><div ui-view='wordForms'></div>", 
    url: '/:wordId', 
}; 

var rootSubjectsSubjectAdminWordsWordDelete = { 
    name: 'r.s.s.a.w.w.delete', 
    views: { 
     "[email protected]": { 
      templateProvider: ['$templateCache', ($templateCache) => { 
       return $templateCache.get('/app/admin/word/wordData.html'); 
      }] 
     }, 
     "[email protected]": { 
      templateProvider: ['$templateCache', ($templateCache) => { 
       return $templateCache.get('/app/admin/word/wordForms.html'); 
      }] 
     } 
    }, 
    url: '/delete', 
}; 

var rootSubjectsSubjectAdminWordsWordEdit = { 
    name: 'r.s.s.a.w.w.edit', 
    views: { 
     "[email protected]": { 
      templateProvider: ['$templateCache', ($templateCache) => { 
       return $templateCache.get('/app/admin/word/wordData.html'); 
      }] 
     }, 
     "[email protected]": { 
      templateProvider: ['$templateCache', ($templateCache) => { 
       return $templateCache.get('/app/admin/word/wordForms.html'); 
      }] 
     } 
    }, 
    url: '/edit', 
}; 

私はすべて同じ「ビュー:」を共有していることを編集、削除して、新しい状態を持っています。毎回ビューを繰り返すことを避けることができるように、ビュー定義だけを含む抽象的な状態を持つことができる方法はありますか?

答えて

1

次あなたは、ビューの設定と共有変数を作成することができます。

var sharedViewConfig = { 
    "[email protected]": { 
     templateProvider: ['$templateCache', ($templateCache) => { 
      return $templateCache.get('/app/admin/word/wordData.html'); 
     }] 
    }, 
    "[email protected]": { 
     templateProvider: ['$templateCache', ($templateCache) => { 
      return $templateCache.get('/app/admin/word/wordForms.html'); 
     }] 
    } 
}; 

var rootSubjectsSubjectAdminWordsWordDelete = { 
    name: 'r.s.s.a.w.w.delete', 
    views: sharedViewConfig, 
    url: '/delete', 
}; 

var rootSubjectsSubjectAdminWordsWordEdit = { 
    name: 'r.s.s.a.w.w.edit', 
    views: sharedViewConfig, 
    url: '/edit', 
}; 

それとも、抽象状態を作成することができます。

var abstractState = { 
    name: 'r.s.s.a.w.w.abstract', 
    abstract: true, 
    views: { 
     "[email protected]": { 
      templateProvider: ['$templateCache', ($templateCache) => { 
       return $templateCache.get('/app/admin/word/wordData.html'); 
      }] 
     }, 
     "[email protected]": { 
      templateProvider: ['$templateCache', ($templateCache) => { 
       return $templateCache.get('/app/admin/word/wordForms.html'); 
      }] 
     } 
    } 
}; 

var rootSubjectsSubjectAdminWordsWordDelete = { 
    name: 'r.s.s.a.w.w.delete', 
    parent: 'r.s.s.a.w.w.abstract', 
    url: '/delete', 
}; 

var rootSubjectsSubjectAdminWordsWordEdit = { 
    name: 'r.s.s.a.w.w.edit', 
    parent: 'r.s.s.a.w.w.abstract', 
    url: '/edit', 
}; 
+0

ありがとうございました。抽象ビューでは、あなたはURLがあります: '/ delete'、私は間違いだと思います。あなたはウルの答えを見ることができますか?また、WordsDeleteとWordsEditでは、親の必要性を避けるために名前に「抽象」を追加できますか?ありがとう非常に –

+0

あなたは間違いなく、コピー貼り間違いです:) 'abstract:true'も抽象状態定義に挿入する必要があります。私は訂正をしました。今はOKです。 –

+0

状態定義から 'parent'を削除するには、適切な状態名を使うことができます。つまり、基底状態が抽象的(またはそうでない)で、その名前が' base'の場合、 'base.something' 'を親として使用します。 –

1

試し

var viewDes= { 
      "[email protected]": { 
       templateProvider: ['$templateCache', ($templateCache) => { 
        return $templateCache.get('/app/admin/word/wordData.html'); 
       }] 
      }, 
      "[email protected]": { 
       templateProvider: ['$templateCache', ($templateCache) => { 
        return $templateCache.get('/app/admin/word/wordForms.html'); 
       }] 
      } 
     }; 
var rootSubjectsSubjectAdminWordsWordDelete = { 
     name: 'r.s.s.a.w.w.delete', 
     views: viewDes, 
     url: '/delete', 
    }; 

    var rootSubjectsSubjectAdminWordsWordEdit = { 
     name: 'r.s.s.a.w.w.edit', 
     views: viewDes, 
     url: '/edit', 
    }; 
関連する問題