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

Question

所以我可以在我成功的重定向中通过 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）？

Answer 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 应用使用。

Answer 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 模板中）：

<span class="username">{{username}}</span>

关键是：

$scope.username = {};