Question

我正在开发一个使用angularjs的应用程序。在这里我有一个登录页面和主页整个页面分为标题和容器两部分，每个部分分别带有 headerCtrl 和 loginCtrl 。两个部分的标题相同，登录后只有休息部分更改。

这是loginCtrl。

    angular.module('app').controller('LoginCtrl', ['$scope', 'LoginService',
    function($scope, LoginService) {
        $scope.title = "Login";

        $scope.login = function() {
            var user = {
                username: $scope.username,
                password: $scope.password
            };
            LoginService(user);
        };

    }
]);

这是loginService。

angular.module('app')
.factory('LoginService', function($http, $location, $rootScope) {
    return function(user) {
        $http.post('/login',{
                username: user.username,
                password: user.password
            }).then(function(response) {
            if (response.data.success) {
                console.log(response.data);
                $rootScope.user = response.data.user;
                $location.url('/');
            } else {
                console.log(response.data.errorMessage);
                $location.url('/');
            }
        });
    };
});

这是header.html

<div ng-controller="headerCtrl" class="container-fulid">
    <div class="row custom-row1">
        <div><span class="title_top pull-right">{{ user }}</span></div>
    </div>
</div>

我们如何编写headerCtrl以及登录控制器和服务需要进行哪些更改，以便我可以访问header.html文件中的用户详细信息（用户名）。

Answer 1

它可能对你有所帮助!!

您的HTML代码示例

<div ng-controller="loginCtrl" class="container-fulid">
    <div class="row custom-row1">
        <div><span class="title_top pull-right">{{ title }}</span></div>
    </div>
</div>

您的AngularJs代码示例

var baseURL = "http://localhost:56110/";
var app = angular.module('loginApp', []);

app.service('loginService', function ($http) {
    this.login = function (user) {
        return $http.post('/login', user)
          .success(function (data, status, headers, config) {              
           })
           .error(function (data, status, headers, config) {               
           });
          }
        });
    };
});

app.controller('loginCtrl', function ($scope, loginService) {

    $scope.title = "Login";
    $scope.uid = 123;
    $scope.pwd = 123;

    $scope.login = function () {
        var pwd = {
            username: $scope.uid,
            password: $scope.pwd
        };

        loginService.login(pwd).then(function (response) {               
            if (response.data.success) {
                console.log(response.data);
                $rootScope.user = response.data.user;
                $location.url('/');
            }
            else {
                console.log(response.data.errorMessage);
                $location.url('/');
            }
        });
    };
});

Answer 2

当你的lgon服务完成时，你可以在登录控制器的$ rootscope上使用广播，并在headercontroller中监听use事件。你可以传递的事件参数作为用户的详细信息。

访问另一个控制器中的控制器数据

2 个答案: