具有相同 Angular 控制器的第二个视图中无法识别范围变量答案

【问题标题】：Scope variable not recognized in second view with same Angular controller具有相同 Angular 控制器的第二个视图中无法识别范围变量
【发布时间】：2017-08-04 14:44:25
【问题描述】：

我正在尝试实现一个登录功能，将有效用户重定向到个性化的 HTML 视图，以他们的名字欢迎他们。

我的第一个视图是登录视图。当用户单击标记为“登录”的按钮时，ng-click 应该调用我的控制器的 $scope.login，它应该验证用户，设置 $scope.needsLoggingIn 变量，然后重定向到第二个视图（欢迎页面显示$scope.needsLoggingIn 的值）。

我的问题是，当我尝试在$scope.login 函数中设置$scope.needsLoggingIn 变量时，第二个视图（它使用相同的Angular 控制器和模块）没有显示它。当我在控制器中硬编码这样的值时，它只显示$scope.needsLoggingIn，在范围函数之外：

$scope.needsLoggingIn = "Betty";

这是我的控制器中的 $scope.login 函数，它尝试设置 $scope.needsLogging 并在第一个视图中被接受但不被第二个视图接受：

$scope.login = function (username, password) {
    $http({
        method: 'GET',
        url: ('/login/' + username + '/' + password)
    }).then(function successCallback(response) {
        if (JSON.stringify(response.data) === '[]')
        {
            $scope.needsPasswordMessage = true;
            if ($scope.needsPasswordMessage)
                $scope.needsPasswordMessage = false;
            console.log("No match");
        } else {
            $scope.needsLoggingIn = username;
            $scope.issuccessMessage = true;
            if ($scope.isfailureMessage)
                $scope.isfailureMessage = false;
            $window.location.href = '../indextest.html';
            return response;
        }
    }, function errorCallback(response) {
    });
};

有没有人有什么建议可以让我的$scope.needsLoggingIn 被两个 HTML 视图识别，而无需将其硬编码到控制器中？我真的很希望能够让我的$scope.login 函数设置变量值，并让它被使用这个特定控制器的所有视图识别。

【问题讨论】：

把它放在$rootScope中，所有作用域都继承自它。别的...我不认为使用 GET 方法的登录请求是个好主意url:('/login/'+ username + '/' + password )
谢谢！！抱歉，这是一个愚蠢的问题，但是否所有视图都有自己的范围，即使它们使用相同的控制器？
阅读this 了解范围和this 了解$rootScope。基本上范围是每个控制器实例或指令或其他地方创建的，但$scope 与控制器的关系比视图更多
污染 $rootScope 不是一个好建议。这就是服务的用途。
@MikeFeltman 好点，我鼓励 OP 去实现服务

标签： javascript angularjs scope

【解决方案1】：

您希望跨不同视图和控制器实例存在的数据应通过服务处理。

基本上你会创建一个类似的服务：

function userService($http) { 
    let service = {}
    service.needsLoggingIn = ""
    service.login = login

    return service

    function login() {
       return $http.... (your login code)
    }
}

然后将服务注入到您的控件中，根据需要设置属性，并且由于服务是单例的，因此这些属性值将在您注入服务的任何地方都可用。

【讨论】：