AngularJS - UI路由器:从模板中获取模板URL

时间:2014-12-09 22:07:23

标签: angularjs angular-ui-router

我正在通过ui-router创建状态,并将它们连接到同一个控制器。 (尽管显然不同的控制器实例已初始化)

在该控制器内部,我想知道它初始化的模板的名称。

我的想法是以某种方式传递给stateProvider中的控制器属性(ui-sref不解决用深层链接打开浏览器),但是到目前为止我的搜索似乎无法完成。

我不能简单地检查当前状态的名称,因为我正在使用多个视图。

我正在使用相同的控制器处理多个状态和视图,控制器可以在他知道所附模板的名称后立即采取相应行动。

以下是我创建状态和视图的方法:

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/home');

    var controller = 'textFile';
    var base = 'templates';
    var views = ['home', 'about'];

    for (var i = 0; i < views.length; i++)
    {
        var view = views[i];

        $stateProvider.state(view, {
            url: '/' + view,
            views: {
                'header': {
                    templateUrl: base + '/header.html',
                    controller: controller
                },
                'page': {
                    templateUrl: base + '/' + view + '.html',
                    controller: controller
                },
                'footer': {
                    templateUrl: base + '/footer.html',
                    controller: controller
                }
            }
        });
    }
}]);

我需要能够在textFile中知道它是否附加到header.html,footer.html等...

1 个答案:

答案 0 :(得分:1)

为什么不使用解析,以便您可以访问每个控制器实例的唯一数据。例如:

$stateProvider.state(view, {
    url: '/' + view,
    views: {
        'header': {
            templateUrl: base + '/header.html',
            controller: 'textFile',
            resolve: {
                viewName: function() { return 'header'; }
            }
        },
        'page': {
            templateUrl: base + '/' + view + '.html',
            controller: 'textFile',
            resolve: {
                viewName: function() { return 'page'; }
            }
        },
        'footer': {
            templateUrl: base + '/footer.html',
            controller: 'textFile',
            resolve: {
                viewName: function() { return 'footer'; }
            }
        }
    }
});

然后您可以访问控制器中的值:

.controller('textFile', function($scope, viewName){
    console.log(viewName);
});