Javascript 使用ui路由器的命名视图转换

ui路由器中的命名视图是否可以转换到其他命名视图

例如，在下面的代码段中，是否可以从

blue@bar

状态为

orange@foo

state

.state('foo', {
    url: '/',
    views: {

        '': { templateUrl: 'partials/a.html' },

        'black@foo': {
            templateUrl: 'partials/b.html',
            controller: 'SuperController'
        },

        'green@foo': {
            templateUrl: 'partials/c.html',
            controller: 'SuperController'
        },

        'orange@foo': {
            templateUrl: 'partials/d.html',
            controller: 'SuperController'
        }
    }

})

.state('bar', {
    url: '/ping/:x/:y',
    views: {

        '': {
            templateUrl: 'partials/e.html',
            controller: 'DuperController'
        },

        'blue@bar': {
            templateUrl: 'partials/f.html',
            controller: 'DuperController'
        }
    }
})

---

ui路由器

转换用于

状态转换

。换句话说，视图之间没有转换

我们可以做的是将一些命名视图锚（

ui view=“myName”

）移动到根或某个父状态。然后，每个子（孙子）状态都可以针对其父层次结构中的任何命名视图

理解这一点的最佳方法是阅读以下文件中的本章：

并检查此代码段（引用上述资源）：

$stateProvider
.状态（“联系人”{
//这将自动插入未命名的ui视图
//父状态模板的。由于这是顶级状态，
//它的父状态模板是index.html。
templateUrl:'contacts.html'
})
.state（'contacts.detail'{
观点：{
////////////////////////////////////
//相对目标//
//目标为父状态ui视图的//
////////////////////////////////////
//相对地以该状态的父状态“联系人”中的“详细信息”视图为目标。
//在contacts.html中
“细节”：{}，
//相对地以该状态的父状态“contacts”中的未命名视图为目标。
//在contacts.html中
"" : { }, 
///////////////////////////////////////////////////////
//使用“@”的绝对目标定位//
//以该状态或祖先中的任何视图为目标//
///////////////////////////////////////////////////////
//绝对针对此状态下的“info”视图“contacts.detail”。
//在contacts.detail.html中
"info@contacts.detail" : { }
//绝对以“联系人”状态下的“详细信息”视图为目标。
//在contacts.html中
"detail@contacts" : { }
//绝对以父“联系人”状态的未命名视图为目标。
//在contacts.html中
“@contacts”：{}
//绝对以根未命名状态的“状态”视图为目标。
//在index.html中
“状态@”：{}
//绝对以根未命名状态的未命名视图为目标。
//在index.html中
"@" : { } 
});

此外，请检查此示例应用程序（由ui路由器团队提供）

及其状态定义

小引用儿童国家定义，针对许多不同观点：

///////////////////////
// Contacts > Detail //
///////////////////////
// You can have unlimited children within a state. Here is a second child
// state within the 'contacts' parent state.
.state('contacts.detail', {
    // Urls can have parameters. They can be specified like :param or {param}.
    // If {} is used, then you can also specify a regex pattern that the param
    // must match. The regex is written after a colon (:). Note: Don't use capture
    // groups in your regex patterns, because the whole regex is wrapped again
    // behind the scenes. Our pattern below will only match numbers with a length
    // between 1 and 4.
    // Since this state is also a child of 'contacts' its url is appended as well.
    // So its url will end up being '/contacts/{contactId:[0-9]{1,8}}'. When the
    // url becomes something like '/contacts/42' then this state becomes active
    // and the $stateParams object becomes { contactId: 42 }.
    url: '/{contactId:[0-9]{1,4}}',
    // If there is more than a single ui-view in the parent template, or you would
    // like to target a ui-view from even higher up the state tree, you can use the
    // views object to configure multiple views. Each view can get its own template,
    // controller, and resolve data.
    // View names can be relative or absolute. Relative view names do not use an '@'
    // symbol. They always refer to views within this state's parent template.
    // Absolute view names use a '@' symbol to distinguish the view and the state.
    // So 'foo@bar' means the ui-view named 'foo' within the 'bar' state's template.
    views: {
        // So this one is targeting the unnamed view within the parent state's template.
        '': {
            templateUrl: 'app/contacts/contacts.detail.html',
            controller: ['$scope', '$stateParams', 'utils',
            function ( $scope, $stateParams, utils) {
                $scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
            }]
        },
        // This one is targeting the ui-view="hint" within the unnamed root, aka index.html.
        // This shows off how you could populate *any* view within *any* ancestor state.
        'hint@': {
            template: 'This is contacts.detail populating the "hint" ui-view'
        },
        // This one is targeting the ui-view="menu" within the parent state's template.
        'menuTip': {
            // templateProvider is the final method for supplying a template.
            // There is: template, templateUrl, and templateProvider.
            templateProvider: ['$stateParams',
            function ( $stateParams) {
                // This is just to demonstrate that $stateParams injection works for templateProvider.
                // $stateParams are the parameters for the new state we're transitioning to, even
                // though the global '$stateParams' has not been updated yet.
                return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
            }]
        }
    }
})

///////////////////////
//联系人>详细信息//
///////////////////////
//你可以在一个州内有无限个孩子。这里是第二个孩子
//“联系人”父状态中的状态。
.state（'contacts.detail'{
//URL可以有参数。它们可以指定为：param或{param}。
//如果使用了{}，那么还可以指定一个regex模式，该模式
//必须匹配。正则表达式写在冒号（：）之后。注意：不要使用捕获
//在您的正则表达式模式中分组，因为整个正则表达式再次被包装
//在幕后。我们下面的模式将只匹配具有长度的数字
//在1和4之间。
//由于此状态也是“联系人”的子级，因此也会附加其url。
//因此，它的url将结束为“/contacts/{contactId:[0-9]{1,8}}”
//url变为类似于“/contacts/42”，然后此状态变为活动状态
//$stateParams对象变成{contactId:42}。
url:'/{contactId:[0-9]{1,4}}'，
//如果父模板中有多个ui视图，或者
//要从更高的状态树中定位ui视图，可以使用
//views对象配置多个视图。每个视图都可以获得自己的模板，
//控制器，并解析数据。
//视图名称可以是相对的或绝对的。相对视图名称不使用“@”
//符号。它们始终引用此状态的父模板中的视图。
//绝对视图名称使用“@”符号来区分视图和状态。
//所以foo@bar'表示'bar'状态的模板中名为'foo'的ui视图。
观点：{
//因此，这一个目标是父状态模板中的未命名视图。
'': {
templateUrl:'app/contacts/contacts.detail.html'，
控制器：['$scope'，'$stateParams'，'utils'，
函数（$scope、$stateParams、utils）{
$scope.contact=utils.findById（$scope.contacts，$stateParams.contactId）；
}]
},
//这一个目标是未命名根目录（aka index.html）中的ui view=“hint”。
//这展示了如何在*any*祖先状态中填充*any*视图。
“提示”：{
模板：'这是contacts.detail填充“提示”ui视图'
},
//这一个目标是父状态模板中的ui view=“menu”。
“menuTip”：{
//templateProvider是提供模板的最终方法。
//有：template、templateUrl和templateProvider。
templateProvider:[“$stateParams”，
函数（$stateparms）{
//这只是为了证明$stateParams注入对templateProvider有效。
//$stateParams是我们要转换到的新状态的参数，甚至
//尽管全局“$stateParams”尚未更新。
返回“
联系人ID:”+$stateParams.contactId+”；
}]
}
}
})

其他一些与更多的链接

///////////////////////
// Contacts > Detail //
///////////////////////
// You can have unlimited children within a state. Here is a second child
// state within the 'contacts' parent state.
.state('contacts.detail', {
    // Urls can have parameters. They can be specified like :param or {param}.
    // If {} is used, then you can also specify a regex pattern that the param
    // must match. The regex is written after a colon (:). Note: Don't use capture
    // groups in your regex patterns, because the whole regex is wrapped again
    // behind the scenes. Our pattern below will only match numbers with a length
    // between 1 and 4.
    // Since this state is also a child of 'contacts' its url is appended as well.
    // So its url will end up being '/contacts/{contactId:[0-9]{1,8}}'. When the
    // url becomes something like '/contacts/42' then this state becomes active
    // and the $stateParams object becomes { contactId: 42 }.
    url: '/{contactId:[0-9]{1,4}}',
    // If there is more than a single ui-view in the parent template, or you would
    // like to target a ui-view from even higher up the state tree, you can use the
    // views object to configure multiple views. Each view can get its own template,
    // controller, and resolve data.
    // View names can be relative or absolute. Relative view names do not use an '@'
    // symbol. They always refer to views within this state's parent template.
    // Absolute view names use a '@' symbol to distinguish the view and the state.
    // So 'foo@bar' means the ui-view named 'foo' within the 'bar' state's template.
    views: {
        // So this one is targeting the unnamed view within the parent state's template.
        '': {
            templateUrl: 'app/contacts/contacts.detail.html',
            controller: ['$scope', '$stateParams', 'utils',
            function ( $scope, $stateParams, utils) {
                $scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
            }]
        },
        // This one is targeting the ui-view="hint" within the unnamed root, aka index.html.
        // This shows off how you could populate *any* view within *any* ancestor state.
        'hint@': {
            template: 'This is contacts.detail populating the "hint" ui-view'
        },
        // This one is targeting the ui-view="menu" within the parent state's template.
        'menuTip': {
            // templateProvider is the final method for supplying a template.
            // There is: template, templateUrl, and templateProvider.
            templateProvider: ['$stateParams',
            function ( $stateParams) {
                // This is just to demonstrate that $stateParams injection works for templateProvider.
                // $stateParams are the parameters for the new state we're transitioning to, even
                // though the global '$stateParams' has not been updated yet.
                return '<hr><small class="muted">Contact ID: ' + $stateParams.contactId + '</small>';
            }]
        }
    }
})