javascript - Angular 将数据从 Controller 传递到状态

Question

我正在尝试通过路由将一些数据从 Controller 传递到 View 文件。不确定我是否正确传达了消息。

下面是我的编码。

Controller

$scope.roleUsers = function(roleId){
    $scope.testvar = "Role Id Is" + roleId;
    console.log($scope.testvar);
    $state.go('roleUsers');
}

路线

.state('roleUsers', {
    url: '/roleUsersList',
    templateUrl: 'views/modals/roles/roleUsersList.html',
    controller: function($scope) {
        $scope.testvar = "Sent by route file";
    }
})

查看(roleUsersList.html)

<label>asas{{ testvar }}</label>

如何让它在 html 显示中显示“Angular 色 id 是 X”？

最终我想做的是从 API 中获取一些数据(一个数组)并在新 View 中显示它。这只是我初步实现最终目标的基本方法。

需要显示的数据必须来自 Controller (据我了解 Angular)，因为数据会根据用户的其他输入而有所不同。

我认为我可以通过服务/工厂传递数据(这是单例，我想它不适合动态环境？)并使用第二个 Controller ，或者可以将 $rootScope 与第二个 Controller 一起使用。我只是想知道这是否可以在同一个 Controller 中实现。

Answer 1

您可以在路由中发送参数:

$state.go('roleUsers', { roleId: someValue });

或者在 html 中:

<a ui-sref="roleUsers({ roleId: someValue })>..</a>

在你的定义中:

.state('roleUsers', {
    url: '/roleUsersList/:roleId',
    templateUrl: 'views/modals/roles/roleUsersList.html'
})

还有你的 Controller :

function($scope, $stateParams) {
    $scope.testvar = $stateParams.roleId;
}

如果您不希望参数出现在查询字符串中，可以使用 params 选项:

.state('roleUsers', {
    url: '/roleUsersList',
    templateUrl: 'views/modals/roles/roleUsersList.html'
    params: {
        roleId: null
    }
})

参见this documentation