有沒有一種方法可以在抽象狀態之間有一個避免重複相同視圖模板細節的方法？

我有角的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', 
};

我有一個編輯，刪除和一個新的狀態都有着相同的「意見」。有沒有辦法讓我可以擁有某種僅包含視圖定義的抽象狀態，這樣我就可以避免每次重複「視圖」？

來源

2016-05-14 Samantha J T Star

您可以創建共享變量與視圖配置：

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', 
};

來源

2016-05-14 08:09:30

謝謝。在抽象視圖中你有url：'/ delete'，我認爲這是一個錯誤。你能看看你的答案嗎？另外在WordsDelete和WordsEdit中，我可以在名稱中加上「抽象」來避免父母的需要？非常感謝 –

當然，你是對的，它是複製粘貼錯誤:)抽象：真正應該被插入到抽象狀態定義。我已經改正了，現在應該沒問題。 –

要從狀態定義中刪除'parent'，你可以使用適當的狀態名，也就是說如果你有基態，它是抽象的（或不是），它的名字是'base'，那麼名稱爲'base.something'的每個狀態都會指向'base作爲其父母。 –

嘗試以下

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', 
    };

來源

2016-05-14 07:50:32

有沒有一種方法可以在抽象狀態之間有一個避免重複相同視圖模板細節的方法？

回答

相關問題