Question

在Angular / Ionic中我有三个不同的states：

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

    .state('layout', {
      url: "",
      abstract: true,
      templateUrl: "templates/base/layout.html"
    })

    .state('layout.home', {
      url: "/home",
      views: {
        'mainContent' :{
          templateUrl: "templates/home.html"
        },
        'leftMenuContent' :{
          controller: "LeftMenuController",
          templateUrl: "templates/left-menu.html"
        }
      }
    })
    .state('layout.about', {
      url: "/about",
      views: {
        'mainContent' :{
          templateUrl: "templates/about.html",
          controller: "AboutController"
        },
        'leftMenuContent' :{
          controller: "LeftMenuController",
          templateUrl: "templates/left-menu.html"
        }
      }
    })

所以我有一个抽象状态，它定义了基本/主要布局，home和about状态，它们有两个views：mainContent和leftMenuContent。至于LeftMenuController功能，它只会根据$state.current.name为每条路线返回自定义选项。

由于leftMenuContent对于每个州都是相同的，有没有办法避免在每个新状态中定义它并从layout状态（或其他地方）继承它？

Answer 1

你几乎就在那里：通过调用状态layout.home，它将从layout继承其视图，所以这应该有效：

.state('layout', {
  url: "",
  abstract: true,
  templateUrl: "templates/base/layout.html",
  views: {
    'leftMenuContent' :{
      controller: "LeftMenuController",
      templateUrl: "templates/left-menu.html"
    }
  }
})

.state('layout.home', {
  url: "/home",
  views: {
    'mainContent' :{
      templateUrl: "templates/home.html"
    }
  }
})
.state('layout.about', {
  url: "/about",
  views: {
    'mainContent' :{
      templateUrl: "templates/about.html",
      controller: "AboutController"
    }
  }
})

Answer 2

这是我发现的用于显示嵌套视图的内容。

所以，我有一个主视图，我在其中显示我的主页模板（在index.html中为<ui-view>），在主页模板中我有另一个<ui-view>，其中我根据什么调用不同的状态我想要。

config(function config($stateProvider) {
        $stateProvider
            .state('sidemenu.home', {
                url: '/home',
                views: {
                    'topView': {
                        controller: 'HomeCtrl',
                        templateUrl: 'home/home.tpl.html'
                    }
                }
            })
            .state('sidemenu.home.list', {
                templateUrl: 'home/home-list.tpl.html'
                /*,controller: 'HomeCtrl'*/
            })
            .state('sidemenu.home.login', {
                templateUrl: 'home/home-login.tpl.html'
                /*,controller: 'HomeCtrl'*/
            })
            .state('sidemenu.home.register', {
                templateUrl: 'home/home-register.tpl.html'
                /*,controller: 'HomeCtrl'*/
            })
            .state('sidemenu.home.coach', {
                templateUrl: 'home/home-coach.tpl.html'
                /*,controller: 'HomeCtrl'*/
            })
            ;
    })

    .controller('HomeCtrl', function HomeController($scope, $rootScope, $state) {

        /**
         * ===== FIRST LOGIC =====
         **/

        //Redirect the user to the appropriate page.
        switch ($rootScope.tellState()) {
            case "ok-local":
                $state.transitionTo('sidemenu.home.list');
                break;
            case "register":
                $state.transitionTo('sidemenu.home.register');
                break;
            case "login":
                $state.transitionTo('sidemenu.home.login');
                break;
            case "coach":
                $state.transitionTo('sidemenu.home.coach');
                break;
        }

Angular：继承状态中的视图

2 个答案: