Angular UI路由器在运行时替换视图

Angular UI Router replace view on runtime

本文关键字：替换 视图 运行时 UI 路由器 Angular      更新时间：2023-09-26

我试图在运行时更改父视图模板-在服务中。

我的应用配置如下:

$stateProvider
.state('base', {
    abstract: true,
    views: {
        'header':       {
            controller: 'HeaderCtrl',
            templateUrl: 'header.html'
        },
        '': {
            template: '<div ui-view="main"></div>'
        }
    }
})
.state('base.home', {
    url: '/',
    views: {
        'main': {
            controller: 'SomeContentCtrl',
            templateUrl: 'content.html'
        }
    }
});

然后我有一个从someecontentctrl调用的服务，它将监听事件，并且在这样的事件上，我想将头部的templateUrl设置为空。比如:

angular
    .module('RemoveTemplate', [ ])
    .factory('RemoveTemplate', ['$window', '$view', '$state',
        function RemoveTemplate ( $window, $view, $state ) {
            var windowElem  = angular.element($window);
            var listen   = function ( ) {
                windowElem.on('RemoveTemplate', function ( event ) {
                    $view.load('header@base', {
                        templateUrl: null
                    });
                    // Trying both, even tried without refreshing the state
                    $state.reload();
                    $state.go('wh.lobby');
                });
            };
            return {
                listen:  listen
            };
        }
    ]);
});

但这根本不起作用。以前有人遇到过类似的用例吗?

谢谢

你可以指定一个templateURL函数，在每次导航到状态时运行。

https://github.com/angular-ui/ui-router/wiki/Quick-Reference template-templateurl-templateprovider

这个方法可以检查它是否应该提供url或其他东西;例子:

$stateProvider.state('home', {
        url: '/',
        templateUrl: function () {
            if (header === true) {
                return 'app/templates/home.html';
            } else {
                return somethingElse;
            }
        }
    })

如果你想在不删除html的情况下'隐藏' header部分，请尝试在header标签中使用ng-show指令并检查实际状态。

<div ng-show="state.is('base')">

这样你只需要在控制器中注入$state服务。当状态为base时，div将显示，如果导航到子状态，它将隐藏。

注。美元的状态。Is返回一个布尔值，此方法也适用于ng-if。

相关文章：