Question

我正在设置一个angularjs应用程序，它有多个垂直列显示在同一页面上，根据点击的项目，新的或不同的列将展开。

Here's my jsbin example.

您如何建议以角度设置？是否应该使用带嵌套子项的ui-router进行设置，或者您有更好的建议吗？赞赏的例子。

谢谢：）

Answer 1

我认为这是ui-router嵌套状态机的一个很好的例子。

我已经找到了您可能想要的ui-router状态配置的示例以及将数据公开到适当范围的相应控制器的示例。

请注意，这绝对不是完成的代码结构，但它应该让您了解语法以及如何通常使用已解析的数据等实现嵌套的ui-router状态。

代码全是coffeescript。如果你需要在javascript中，这里有一个transpiler。模板代码段示例为Jade，here is a jade to html converter

UI-Router配置

angular
.module 'app', ['ui.router']
.config ($stateProvider) ->
    $stateProvider

        .state 'root',
            url:'/'
            templateUrl: "root.html"
            controller: 'rootCtrl'
            resolve:
                items:(dataService) -> dataService.getPrimary

        .state 'root.primary',
            url:'/{primary}'
            templateUrl: "primary.html"
            controller: 'primaryCtrl'
            resolve:
                items:(dataService, $stateParams) -> 
                    dataService.getSecondary $stateParams.primary

        .state 'root.primary.secondary',
            url:'/{secondary}'
            templateUrl: "secondary.html"
            controller: 'secondaryCtrl'
            resolve:
                items:(dataService, $stateParams) -> 
                    dataService.getTertiary $stateParams.secondary

        .state 'root.primary.secondary.tertiary',
            url:'/{tertiary}'
            templateUrl: "tertiary.html"
            controller: 'tertiaryCtrl'
            resolve:
                content:(dataService, $stateParams) -> 
                    dataService.getContent $stateParams.tertiary

<强>控制器

angular
.module 'app'
.controller 'rootCtrl', ($scope, items) ->
    $scope.primaryItems = items.data

angular
.module 'app'
.controller 'primaryCtrl', ($scope, items) ->
    $scope.secondaryItems = items.data

angular
.module 'app'
.controller 'secondaryCtrl', ($scope, items) ->
    $scope.tertiaryItems = items.data

angular
.module 'app'
.controller 'tertiaryCtrl', ($scope, content) ->
    $scope.content = content.data

root.html

ul
    li(ng-repeat="item in primaryItems track by $index")
        a(ui-sref="root.primary({ primary: '{{item}}'})")

primary.html

ul
    li(ng-repeat="item in secondaryItems track by $index")
        a(ui-sref="root.primary.secondary({ secondary: '{{item}}'})")

Answer 2

Ui-Router对我来说很有意义......其中一个好处就是它可以很好地指定控制器和所有内容，这样你就可以将交互元素添加到下一列。

如果这种类型的东西不重要而您只想要内容，则可以轻松使用标签。

Angularjs嵌套路由并在视图中加载多个页面

2 个答案: