Question

我想动态更改ui-view属性，例如每次属性更改时，视图也会更改...

我使用多个视图如下：

$stateProvider.state('main',
        {url: "/main",
            views: {
                '': { templateUrl: "partials/main", controller: "MainCtrl" },
                'clients@main': {templateUrl: "partials/client-list", controller: "ClientListCtrl"},
                'impexp@main': {templateUrl: "partials/imp-exp", controller: "ImpExpCtrl"}
            }
        }
    );

在我的MainCtrl中，我定义了一个$ scope变量，如下所示：

$scope.main_view = 'clients';

和我的HTML / jade：

div(ng-attr-ui-view='{{ main_view }}'

问题在于，当我动态更改$ scope.main_view时，我的视图不会改变。

是否可以动态更改ui-view？如果是，怎么样？

Answer 1

StateProvider （可能是app.js）

  $stateProvider
    .state('main', {
      url: "/main",
      templateUrl: "partials/main.html",
      controller: 'MainCtrl'
    })
    .state('main.substate', {
      url: "/", // Inherits /main from parent state
      templateUrl: "partials/client-list.html",
      controller: 'ClientListCtrl',
    });

任何模板都会加载到<div ui-view>

HTML示例：

<!-- Add your site or application content here -->
<div ng-include="'../views/main-nav.html'" ng-controller="NavCtrl"></div>

<div id="main" ui-view=""></div><!-- end #main -->

<div ng-include="'../views/footer.html'"></div>

触发状态更改的事件：

<a ui-sref="main.substate">Changes out template and controller</a>

<span ng-click="$state.go('main.substate')">Clicking this will change template</span>

签出ui-router $state docs。

UIRouter - 动态更改ui-view属性

1 个答案: