AngularJS / UI-Router：如何將一個控制器與多個命名視圖一起使用？

Question

我有一個子狀態，該狀態填充了父狀態（標題，內容）中的命名視圖。 它們都共享相同的數據，但是，我不想做一個冗余的第二個控制器，但這似乎是我唯一的選擇之一。 我可以只使用一個視圖，但是它將有太多標記，看起來很亂。

我在這里閱讀了文檔，它們顯示的示例是針對處於該狀態的每個視圖具有其自己的控制器的。

這對於我的情況而言並不理想。 例如，ui-router說我必須這樣做：

.state('root.profile', {
    url: '@:slug',
    views: {
        'header': {
            templateUrl: 'app/profile/profile-header.html',
            controller: 'ProfileHeaderController as profileHeader'
        },
        'content': {
            templateUrl: 'app/profile/profile-body.html',
            controller: 'ProfileBodyController as profileBody'
        }
    }
});

..而我寧願這樣做：

.state('root.profile', {
    url: '@:slug',
    views: {
        'header': {
            templateUrl: 'app/profile/profile-header.html'
        },
        'content': {
            templateUrl: 'app/profile/profile-body.html'
        }
    },
    controller: 'ProfileController as profile'
});

第二種選擇對我來說更好，因為正如我說的那樣，它們共享相同的數據，我寧願不重復兩次重復很多相同的邏輯，但是不幸的是它不起作用。

我已經在為一個控制器使用服務。 我不想創建另一個服務只是為了存儲要在兩個控制器中使用的一組值，因為這仍然不是真正的DRY。

是否有解決此類問題的方法？

Answer 1

考慮到您的代碼示例，我看不出這句話有什么錯誤： “它們共享相同的數據，我寧願不重復兩次復制很多相同的邏輯” 。

1） 它們共享相同的數據 ：由於您擁有服務，因此我假設服務存儲了當前數據狀態，這意味着控制器確實共享了相同的數據。

2） 而不是兩次重現很多相同的邏輯 ：您的視圖引用的是同一控制器，但是引用的實例不同，這意味着您不必重現任何邏輯。

“我已經為一個控制器使用了一項服務。我不想只創建一個服務來存儲要在兩個控制器中使用的一組值” 。 如果將服務變成工廠，這是一個單例，則相同的實例將傳遞給使用factory-service的每個控制器。

但是，我看到了一種可能的解決方案，您可以用來解析數據並將控制器定義為配置文件狀態的父級。 這是通過在root和root.profile狀態之間具有另一個狀態來實現的。 在兩個視圖（下面的例子profile-body.html和profile-header.html ）現在可以使用的相同實例ProfileController 。

.state('root', { .. })
.state('root.profile', {
    abstract:true,
    controller:'ProfileController as profile',
    resolve: {
       profile:function(yourProfileDataService) {
           //Resolve profile data
       }
    }
})
.state('root.profile.view', {
    url: '@:slug',
    views: {
        'header': {
            templateUrl: 'app/profile/profile-header.html'
        },
        'content': {
            templateUrl: 'app/profile/profile-body.html'
        }
    }
});

如示例所示，我還建議使用resolve屬性，該屬性在實例化控制器之前先解析數據，然后將其注入到控制器中。 解決文檔 。