Question

我有两个指令，每个指令显示一个文档列表，但方式略有不同：一个显示用户收藏的文档，另一个显示用户固定的文档。这两个属性取决于为每个文档指定的两个对象成员，即：

document = {
    pinned: true,
    favorite: false
};

根据我们要显示的文档类型，每个指令显示一个具有自己标题的框架。出于重构目的，我对两者使用相同的模板，并在两个控制器中指定不同的模板字符串和对象，每个控制器专用于指令。（即调用获取我们想要的文档的服务成员是在字符串中指定的，因为这些文件的处理完全相同）

......直到我意识到两个控制器几乎相同，唯一改变的是...模板字符串。

所以我想出的是使用完全相同的控制器和模板（DocumentsPanel），但仍有两个指令，唯一的区别是link()：

function documentsPanelFavorites(templateService, resources) {
    return {
        restrict: 'A',
        templateUrl: templateService.getUrl('Documents/Panel/documentsPanel.html'),
        controller: 'DocumentsPanel',
        scope: true,
        link: link
    };

    function link(scope) {
        //Used to show a favorite/pinned checkmark for each document entry
        scope.documentOptions = {
            showFavoriteCheckmark: true, 
            showPinnedCherkmark: false
        };

        scope.panelName = resources.text.MODULE_TITLE_FAVORITE_DOCUMENTS;
        scope.className = 'favorites';
        scope.noDocumentText = 'No favorite for this user';

        // Used by the controller to know which method of the
        // document dataService to call to get the listed documents
        scope.documentList = 'favoriteDocuments'
        // etc.
    }
};

documentsPanel.html模板然后通过link()使用控制器范围中定义的这些字符串。

注意：用于表示列表中文档的另一个指令包含在documentsPanel.html中，这就是我在每个指令中设置showPinned和showFavorite选项的原因：它是相同的指令显示每个文档，并在其他地方使用所有设置true。

这会被视为良好做法吗？如果没有，什么是更好的解决方案？

提前致谢！

Answer 1

我希望documents="document | filter:{pinned:true}"和documents="document | filter:{favorite:true}" ...考虑标题，没有文档文本等。我首先创建配置对象并将其传递给指令：config.title = '...', config.nodoctext = ...但是如果数量为这个字符串参数太大了，只需创建2个模板。

覆盖指令中的行为：最佳做法？

1 个答案: