ui-router 中的多态视图答案

【问题标题】：Polymorphic views in ui-routerui-router 中的多态视图
【发布时间】：2014-06-04 01:01:43
【问题描述】：

假设我有一个person 数据对象，可以是不同类型的人：

{
  name: 'Clyde',
  gender: 'male'
},
{
  name: 'Jean',
  gender: 'female'
}

所以，我有一个视图状态可以为我处理这个问题，但我希望其中的细节有所不同......

州

$stateProvider.state('person', {
  url: '/person/:id',
  templateUrl: 'person.html',
  controller: 'PersonController',
  resolve: {
    personInstance: function($stateParams, dataModel) {
      return dataModel.getPerson($stateParams.id);
    }
  }
};

查看人员：{{personInstance.name}}

好的，我有我的状态，但我希望子状态代表我不同的多态视图：

$stateProvider
  .state('person.male', {
    templateUrl: 'person-male.html',
    controller: 'PersonMaleController'
  })
  .state('person.female', {
    templateUrl: 'person-female.html',
    controller: 'PersonFemaleController'
  });

酷。但是......我如何过渡到状态？在数据解析之前，我不知道这是哪种类型的人。我需要在父 sttae 的 onEnter 回调中执行此操作吗？

onEnter: function($state, $stateParams, personInstance) {
  if(personInstance.gender === 'male') {
    $state.go('person.male', $stateParams);
  } else if(personInstance.gender === 'female') {
    $state.go('person.female', $stateParams);
  }
}

这看起来很合理，但是这样做会触发父状态，从而导致onEnter 事件，从而导致转换，这将永远发生。总的来说，无论如何这感觉有点不对劲，但我想不出更好的方法来做到这一点。感觉有更好的办法。

编辑顺便说一句，我尝试将其保持为单一状态并在person.html 中执行ng-switch 并使用ng-include 包含模板，该模板显式设置控制器......但那个子控制器没有获取对 personInstance 的引用。无论如何，这比我所拥有的更糟糕，但这是我尝试过的。

【问题讨论】：

“variable.male”应该是“person.male”吗？女性也一样？
好的，谢谢。固定。

标签： angularjs angular-ui-router

【解决方案1】：

您的解决方案运行良好，但您必须在 PersonController 中进行重定向，这不是由子状态继承的。从父控制器重定向似乎也很合适，它可以包含所有子类型共有的任何逻辑。

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="angular.js"></script>
    <script src="angular-ui-router.js"></script>
</head>
<body>
<h1>Polymorphic States with ui-router</h1>
<div ui-view></div>

<script>

    var app = angular.module('app', ["ui.router"]);

    app.config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise("/person/1");
        $stateProvider
                .state('person', {
                    url: '/person/:id',
                    //templateUrl: 'person.html',
                    template: '<h2>Generic Person Template</h2><ui-view></ui-view>',
                    controller: 'PersonController',
                    resolve: {
                        personInstance: function($stateParams, dataModel) {
                            return dataModel.getPerson($stateParams.id);
                        }
                    }
                })
                .state('person.male', {
                    template: '<h3>This is a male person view</h3>',
                    controller: 'PersonMaleController'
                })
                .state('person.female', {
                    template: '<h3>This is a female person view</h3>',
                    controller: 'PersonFemaleController'
                })
        ;
    });
    app.controller('PersonController', function ($state, personInstance) {
        // Do stuff here relevant to both genders.

        if(personInstance.gender === 'male') {
            $state.go('person.male');
        } else if(personInstance.gender === 'female') {
            $state.go('person.female');
        }
    });

    app.controller('PersonMaleController', function ($state) {
    });
    app.controller('PersonFemaleController', function ($state) {
    });
    app.factory('dataModel', function($q){
        return{
            getPerson: getPerson
        };
        function getPerson(id){
            var people = [
                {
                    id: 1,
                    name: 'Clyde',
                    gender: 'male'
                },
                {
                    id: 2,
                    name: 'Jean',
                    gender: 'female'
                }];
            var person = {};
            for(var i = 0; i < people.length; i++){
                if (people[i].id == parseInt(id)) {
                    person = people[i];
                }
            }
            return $q.when(person);
        }
    });
</script>
</body>
</html>

【讨论】：