Question

只需检查ui-router的方法。确定它能做到这一点，但会产生一些摩擦。我希望我的第三个模板在我的第二个模板中渲染 - 但我的控制器甚至没有初始化为我的第三个状态，除非我在我的第一个模板中定义了我的ui-view。

示例代码

模板1这是从MVC视图中呈现的

<div class ="animate-container" ng-app="uiRouter-Browse">   
<div class="products-slide-animate" ui-view="cat1">
        <div>        
            <div><a ui-sref="cat1({id:1})">1</a></div>
        <div><a ui-sref="cat1({id:2})">2</a></div>
        <div><a ui-sref="cat1({id:3})">3</a><div>
        </div>
</div>
</div>

模板2

<div>
<div class="row all-categories-wrapper">
    <div class="col-xs-12 list-item">
        <a href="#/" class="parent">
            <i class="chevron-left"></i>
            <div>All Categories </div>
        </a>
    </div>

</div>

</div>

<!--want 3rd template to render here -->
<div ui-view="cat2" class="products-slide-animate" autoscroll="false">
<div class="cat2-wrapper" ng-repeat="cat1 in data.Cat1s">
    <div class="row">
        <div class="col-xs-12 list-item">
            <a ui-sref="cat2({id:{{cat1.ID}}, name:'{{cat1.UrlEncodedName}}'})">
                <div class="list-item-text">{{cat1.Name}}</div>
                <i class="chevron-right"></i>
            </a>
        </div>
    </div>
</div>   
</div>

模板3

<div>
    //some content to render
</div>

我的ui-router脚本

var browse = angular.module('uiRouter-Browse', ['ui.router', 'ngAnimate'])
.run(
    ['$rootScope', '$state', '$stateParams',
        $rootScope.$on('$stateChangeSuccess',
            function (event, toState, toParams, fromState, fromParams) {
                console.log(toState.name);
                console.log(fromState.name);
            }
        );
    }]);

browse.config(
['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {        
    $urlRouterProvider            
        .otherwise('/');
    $stateProvider
        .state('cat1', {
            url: '/cat1/:id?name',
            views: {
                'cat1': {
                    templateUrl: '/Template1.html',
                    controller: //Get some data and return
                }
        }})
        .state('cat2', {
            url: '/cat2/:id?name',                
            views: {
                'cat2': {
                    templateUrl: '/Template2.html',
                    controller: //Get some data and return
                }
            }
        });
}]);

大多数（如果不是全部）示例我看到整个ui视图被替换，而不是部分被替换 - 即模板2中ui视图中的模板3的渲染。

因此，当点击模板1中的cat 1链接时，它会转换到下一个状态，调用控制器并且我的动画很漂亮。

当我点击cat2链接时，我的状态被正确调用但控制器未被触发。然后我回到我之前的观点/状态。

如果我放置一个ui-view =＆＃34; cat2＆＃34;模板1中的div然后控制器触发，我的模板呈现。我只是希望它在template2的ui-view中呈现。

由于

Answer 1

虽然不确定它是否真的满足您的需求，原因和解决方案处于不同的状态定义，但我们需要状态嵌套。我们根本不可能有两个＆＃34;完全＆＃34;独立的国家，并尝试将一个注入另一个。我们必须让其中一个父，一个成为孩子：

当前情况：

$stateProvider
    .state('cat1', {
    ...
    }})
    .state('cat2', {
    ...
    });

这两个州都在这个片段中＃＆root;＆＃34; root＆＃34;水平。如果我们想将cat2嵌套到cat1中，则必须将它们定义为：

$stateProvider
    .state('cat1', {
    ... // this is a parent
    }})
    .state('cat1.cat2', {
    ... // this is a child
    });

这将导致（子）状态cat2的url从父级和它自己构建：

#/'/cat1/:id/cat2/:id?name&nameurl',

但如果我们不需要父url部分及其参数，我们可以使用绝对url：

.state('cat2', {
        url: '^/cat2/:id?name',

见：

ui-router在视图模板中渲染ui-views

1 个答案: