使用 $location.path 更改视图后无法访问 $scope 变量答案

【问题标题】：Can't access $scope variables after changing view with $location.path使用 $location.path 更改视图后无法访问 $scope 变量
【发布时间】：2019-01-05 14:38:39
【问题描述】：

我正在尝试访问 $scope 上的数据不再存在于 $scope 上的变量。

带按钮的表单：

<form ng-submit="getBrokenProbes()">
            <table class="table table-striped">
                <tr>
                    <th>Bmonitor</th>
                    <th>Select Bmonitor</th>

                </tr>
                <tr ng-repeat="bmonitor in bmonitors">
                    <td>
                        <span>{{bmonitor.domainName}}</span>
                    </td>
                    <td>
                        <button class="btn btn-primary" ng-click="getBrokenProbes(bmonitor)">Request</button>
                    </td>
                </tr>
            </table>
        </form>

控制器：

app.controller('logmeinValidationCtrl', ['$scope','$http', '$location', function($scope,$http, $location){

        $scope.bmonitors = {};

        $scope.brokenProbes = {};

        $http.get('http://localhost/getBmonitors').success(function (data) {
            $scope.bmonitors = data;
            console.log($scope.bmonitors);
        });

        $scope.getBrokenProbes = function(bmonitor) {
            let url = 'http://localhost/getBrokenProbes';
            $http.post(url, bmonitor).then(function (response) {
                $scope.brokenProbes = response.data.hosts;
                console.log($scope.brokenProbes);
                $scope.showBrokenProbes();
            })
        };

        $scope.showBrokenProbes = function () {
            $location.path('/logmeinValidationResult')
        }

    }]);

我试图在不同的视图中显示该数据，但 $scope.brokenProbes 在 logmeinValidationResult.html（我在 $location.path 之后登陆的页面）中不可用，因此它只显示一个空表。

logmeinValidationResult.html

<table class="table table-striped">
        <tr>
            <th>Probe name</th>
        </tr>
        <tr ng-repeat="probe in brokenProbes">
            <td>
                <span>{{probe.description}}</span>
            </td>
        </tr>
    </table>

新页面控制器：

app.controller('logmeinValidationResultCtrl', ['$scope', function($scope){
        console.log($scope.brokenProbes); //This yields undefined
    }]);

【问题讨论】：

嗯，是的，它是未定义的，因为您从未定义它。您定义的变量在不同控制器的范围内。每个控制器都有自己的作用域（这就是它被称为作用域的原因）。看来您的发布请求实际上应该是 GET。所以从第二个控制器发出请求，而不是从第一个控制器发出请求。
@JBNizet 所说的。此外，您可以将 GET 请求移至服务并在整个应用程序中从那里获取您的价值：docs.angularjs.org/guide/services。否则，您可以使用 ui-router 之类的东西将状态传递给不同的控制器。 ui-router.github.io/ng1/docs/latest/modules/state.html

标签： angularjs

【解决方案1】：

I) 变量$scope.brokenProbes属于控制器logmeinValidationCtrl，其中定义... 为了在另一个控制器中使用它，您应该传递它 - 广播。

或

II)另一个（更好的）解决方案是当用户被重定向到logmeinValidationResult时，您可以调用API，获取数据并分配给$scope.brokenProbes变量。

在这种情况下，您的旧控制器应如下所示：

app.controller('logmeinValidationCtrl', ['$scope','$http', '$location', function($scope,$http, $location){

    $scope.bmonitors = {};

    $http.get('http://localhost/getBmonitors').success(function (data) {
        $scope.bmonitors = data;
        console.log($scope.bmonitors);
    });

    $scope.getBrokenProbes = function(bmonitor) {

       $location.path('/logmeinValidationResult/' + bmonitor); // Pass bmonitor to the result here so you can call the api with that parameter later on

    };

}]);

你的新页面控制器应该是这样的：

app.controller('logmeinValidationResultCtrl', ['$scope','$http', '$routeParams', function($scope,$http, $routeParams){

        $scope.brokenProbes = [];

        let url = 'http://localhost/getBrokenProbes';
        let bmonitor = $routeParams.bmonitor; // Get passed bmonitor value from the route params

        $http.post(url, bmonitor).then(function (response) {
            $scope.brokenProbes = response.data.hosts;
            console.log($scope.brokenProbes);
        })
}]);

并且不要忘记将路由参数bmonitor 注册到您的 $routeProvider 或任何您使用的...

【讨论】：