使用带有角度的 EJS 渲染 html 文件答案

【问题标题】：Render html files with EJS with angular in it使用带有角度的 EJS 渲染 html 文件
【发布时间】：2016-12-10 19:17:42
【问题描述】：

我有一个节点 + 角度项目。我想渲染一个 html 页面并用一些值初始化它。我希望将这些值链接到 Angular 范围。

所以我有一个输入，我将它与 ng-model 链接，但这会删除 EJS 初始化。

server.js：

var express = require('express');
var app = express();
app.engine('html', require('ejs').renderFile);
app.set('views', __dirname + '/front/views');
app.set('view engine', 'html');
app.use('/front',express.static(__dirname + '/front'));

app.get('/signup',function(req,res){
    res.render('view',{
        user:{
            email:"user mail",
        }
    })
});
var port = 5000;
app.listen(port, function() {
    console.log("Listening on " + port);
});

view.html:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<script src="/front/controllers/app.js"></script>

<html ng-app="onboardingApp">

    <form id="msform" novalidate ng-controller="onboardingController">

        <input required  type="text" name="email" ng-model="signup.user.email">
        <label for="email">Email</label>

        <input type="button" name="next" ng-click="displaySignup()" value="NEXT"/>

    </form>

</html>

app.js：

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

onboardingApp.controller('onboardingController',function OnboardingController($scope) {

    $scope.signup = {
        user:{
            email:""
        }
    }

    $scope.displaySignup = function(){
        console.log($scope.signup)
    }

});

所以我试图设置的值：input required type="text" name="email" ng-model="signup.user.email"

用ejs，然后这个值要与角度模型signup.user.email.联系起来

有人可以帮我吗？

【问题讨论】：

标签： javascript html angularjs node.js ejs

【解决方案1】：

你可以在view.html的最后加上这段js

<script type="text/javascript">
      angular.module('onboardingApp')
        .value('userEmail', <%- JSON.stringify(user.email) %>);
</script>

然后像这样在需要的地方注入组件：

onboardingApp.controller('onboardingController',
 function OnboardingController($scope, userEmail) {

    $scope.signup = {
        user:{
            email: userEmail
        }
    }

    $scope.displaySignup = function(){
        console.log($scope.signup)
    }

});

【讨论】：