Question

我无法访问$ http post成功时设置的$ scope属性的值。我试图在index.html文件中访问它。以下是供参考的代码，请帮我解决，我是AngularJs的新手

var app = angular.module('formExample', []);
app.controller("formCtrl", ['$scope','$rootScope', '$http',    
function($scope,$rootScope, $http) {
    $scope.loginurl = 'loginsubmit.php';        
    $scope.loginFormSubmit  = function(isValid) {           
        if (isValid) {              

            $http.post($scope.loginurl, {"username": $scope.username,"password": $scope.password}).
                    success(function(data, status) {
                        $scope.status = status;
                        $scope.data = data;
                        $scope.isAdmin=data.isAdmin;
                        $scope.username=data.username;                          
                        location.href="Index.html";                         
                    })  
        }else{

              alert('Form is not valid');
        }

    }



 html form code

 <div class="row" ng-app="formExample" >
       <div ng-controller="formCtrl">
          <div class"col-md-8">&nbsp;</div>
          <div>username: {{$scope.username}} </div>

Answer 1

您可能希望超时location.href以便$ scope不会丢失。

在重定向之前，您有几个选项可以让您的用户数据全局显示在应用中。您可以将用户变量放在影响所有视图的控制器（例如app.js中的控制器）中，或者将其放在$rootScope或localStorage / sessionStorage中，作为@Marco在评论建议中。

另外，请使用{{ username }}代替{{ $scope.username }}。后者不打印任何东西。

Answer 2

对于登录和身份验证，我通常会做同样的事情（在他的评论中提到）并在$ rootScope中存储用户信息。然而，这基本上是我唯一使用它的东西，因为最好避免用一堆东西污染rootScope。

我在jsfiddle中设置了一个小操场，让你无耻地从这篇文章中偷走：

http://www.dotnet-tricks.com/Tutorial/angularjs/UVDE100914-Understanding-AngularJS- $ rootScope - 和 - $ scope.html

http://jsfiddle.net/chrislewispac/kd8v6thm/

var app = angular.module('myApp', []);

 app.controller('Ctrl1', function ($scope, $rootScope) {
 $scope.msg = 'World';
 $rootScope.name = 'AngularJS';
 });

 app.controller('Ctrl2', function ($scope, $rootScope) {
 $scope.msg = 'Dot Net Tricks';
 $scope.myName = $rootScope.name;
 });

所有其他答案/评论都很棒。我只是想让你有这个小提琴来玩。通过隔离小问题和测试它们，打破它们并将它们固定在小提琴中，我学到了很多东西。

编辑：有几种方法可以在Angular中跨控制器共享数据：

此外，为了解决在没有数据库的情况下在控制器之间共享数据的其他方法，您还可以创建一个auth'sewage'。服务和工厂是跨控制器共享数据的好方法，我相信它们是实际的预期方式。

这个选项（和其他人）的一个很好的讨论在这里： https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

请参阅更新的小提琴服务示例：

http://jsfiddle.net/chrislewispac/kd8v6thm/1/

添加了以下内容：

app.service("auth", [ function () {
return {
    getAuth: function () {
        var info = {
            name: "Name",
            password: "Password"
            }
        return info;
        }
    };
}]);

无法访问$ http.post成功函数中设置的html中的$ scope值

2 个答案: