Question

我想基于$ state更改socket.io连接，因此当用户更改状态时，我想将$stateParams分配给searchEnv，以便我们可以使socket连接处于活动状态并开始接收该环境的消息。如果我有$ state app.dit，我想将envId设置为dit。如何使用angular $ stateProvider？

来完成此任务

尝试为$ States实现一个视图和控制器而不是多个。

Ctrl.js

var searchEnv = $stateParams.envId;

socket.on(searchEnv + 'Consumer', function(data) {
    $scope.event.push(data);
});

app.js

.state('app.dit', {
    url: '/dit/:envId',
    templateUrl: 'view/partials/dit.html',
    controller: 'DitCtrl'
})
.state('app.st', {
    url: '/st/:envId',
    templateUrl: 'view/partials/dit.html',
    controller: 'DitCtrl'
})

mainCtrl.js

$scope.tabs = [{
        heading: 'Home',
        route: 'app.home',
        active: true
    },
    {
        heading: 'DIT',
        route: 'app.dit',
        active: false
    },
    {
        heading: 'ST',
        route: 'app.st',
        active: false
    },
    {
        heading: 'UAT',
        route: 'app.uat',
        active: false
    },
    {
        heading: 'LSP',
        route: 'app.lsp',
        active: false
    }
];

Answer 1

您可以在$stateChangeStart

中的$scope或$rootScope上观看controller上的操作

    $rootScope.$on('$stateChangeStart', 
    function(event, toState, toParams, fromState, fromParams, options){ ... })

Answer 2

使用$state.includes方法：

//EXAMPLES

$state.$current.name = 'contacts.details.item';

// Using partial names
$state.includes("contacts"); // returns true
$state.includes("contacts.details"); // returns true
$state.includes("contacts.details.item"); // returns true
$state.includes("contacts.list"); // returns false
$state.includes("about"); // returns false

有关详细信息，请参阅UI-Router $state API Reference - includes method

如何根据控制器中的变量设置$ stateParams？

2 个答案: