会话用户名未显示在 angularjs ngView 模板内，但在 ngView 之外显示

Posted 2023-03-11

技术标签:

【中文标题】会话用户名未显示在 angularjs ngView 模板内，但在 ngView 之外显示【英文标题】：session username not showing inside angularjs ngView template but does outside of ngView 【发布时间】：2014-02-25 15:05:09 【问题描述】：

所以我可以在我成功的重定向中通过 mongoose passport-local 显示用户名：

app.get('/profile', isLoggedIn, function (req, res) 
    res.render('profile.html', 
        user: req.user
    );
    console.log(req.user.local.username) //correct username for the session
);

...然后用它在profile.html中显示：

<p><%= user.local.username %></p>

...然而，当我试图在我的 ng-view 中显示相同的内容时：

<div ng-view ng-class="slide" class="slider"></div>

...通过我的路由 example.html 模板：

<p>welcome <%= user.local.username %></p>

..它显示为：不是正确的用户名...

难道不能在 ngView 中包含这些信息吗？是否有解决方案将此信息包含在我的模板中？我试图用 $http 设置工厂：

angular.module('userService', [])

.factory('Users', function($http) 
    return 
        get : function() 
            return $http.get('/profile');
        
    
);

...但它返回了整个 html，所以不是正确的解决方案。

我们一如既往地欢迎和感谢任何指导，因此提前致谢！

编辑回应： 获取价值并路由它并不是真正的问题。问题只是让它在 ngView 中正确显示。

这是我更新的代码：

Rules.get()
        .success(function (data) 
            $scope.rules = data;
            console.log('Rules.get()');
            console.log(data);

            Users.get()
                .success(function (username) 
                    Users.username = username;
                    console.log('Users.get()')
                    console.log(username)
                );
        );

...和...

angular.module('userService', [])

.factory('Users', function ($http) 
    return 
        get: function () 
            console.log('userService')
            return $http.get('/profile/user');
        
    
);

...从以下位置返回：

app.get('/profile/user', function (req, res) 
    console.log('profile/user')
    console.log(req.user.local.username)
    res.json(req.user.local.username);

);

这给了我相同且正确的用户名，但是我该怎么称呼它才能让它显示在 ngView 中？如果放置在实际的 ngView div 之外，它会显示得很好。

从上面的 username rules.username = 没有。 ngView 模板中的服务参数的名称应该是什么（我假设它是一个全新的 $scope）？

【问题讨论】：

【参考方案1】：

问题可能与Angular and Express routing重复？

您可以在 ng-views 中包含 ejs 模板（如 <%= value %>）（请参阅上面的链接），但这里还有其他三个选项。

许多人将服务器数据传递给 Angular 并让 Angular 模板化他们的视图（例如在 MEAN 堆栈中）。这意味着您不需要在您的角度部分中使用 ejs 模板。以下是将数据从服务器传递到 Angular 的三种方法（此博客文章的来源：http://mircozeiss.com/how-to-pass-javascript-variables-from-a-server-to-angular/）：

1。 MEAN 方法

第一个是 MEAN 堆栈中使用的内容。您可以在 ng-view 周围的包装器中发送 Angular 应用所需的所有数据：

<!-- head -->
<!-- body -->
<!-- ng-view element -->

<script type="text/javascript">window.user = <%- user %>;</script>

<!-- rest of js -->
<!-- /body -->

这样，您的 Angular 应用程序可以通过如下提供程序访问数据：

angular.module('myApp')
.factory('UserData', [
    function() 
        return 
            user: window.user
        ;
    
]);

2。使用 `$http` 和 api

第二种是通过restful api提供这些数据，并通过使用$http或$resource的提供者请求数据：

angular.module('myApp')
.factory('UserData', [
    function($http) 
        $http.get('/userAPI').success(function(data)
            return data;
        );
    
]);

3。使用 ng-init

最后，您可以在 ng-init 中使用服务器端模板。

<div ng-init="user = <%- data %>"></div>

这会将数据放在$scope.user 上供您的 Angular 应用使用。

【讨论】：

啊，好吧。很抱歉造成误解。如果没有看到整个应用程序，我无法判断问题出在哪里。但这里有一个我认为你想要实现的目标：plnkr.co/edit/P6MoEa?p=preview 如果我不得不猜测我会说Users.username = username; 应该是$scope.username = username。如果您仍然遇到问题，请利用您所拥有的东西，我会看看是否可以提供帮助。另外一件事，你说 ngView 模板可能是一个全新的 $scope。是的，如果它也有一个新的控制器。但是 $scopes 继承自父 $scopes，因此子 $scope 也可以访问父 $scope 上的任何内容。【参考方案2】：

所以这是我为其他可能正在搜索的人提供的解决方案：

users.js：

angular.module('userService', [])

.factory('Users', function ($http) 
    return 
        get: function () 
            console.log('userService')
            return $http.get('/profile/user');
        
    
);

route.js

$scope.username = ;    
.controller('cntrl', function ($scope, Users) 
        getCurrentUser(Users, $scope);
    )

        function getCurrentUser(Users, $scope) 
        Users.get()
            .success(function (username) 
                $scope.username = username.user;
            );

service.js：

app.get('/profile/user', function (req, res) 
    console.log('profile/user')
    console.log(req.user.local.username)
    res.jsonp( user:req.user.local.username);

);

然后在 html 中（在任何 ngView 模板中）：