我用数据渲染 Handlebars 模板。
var express = require('express'),
app = express();
var handlebars = require('express3-handlebars')
.create({
defaultLayout:'main',
helpers: {
section: function (name, options) {
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
});
// setup hbs
app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.use(express.static(__dirname + '/public'));
app.use(function (req,res,next) {
next();
});
// serving homepage
app.get('/', function (req, res) {
res.render('home');
});
app.get('/about', function(req, res){
res.render('about', {
lucky: "you are lucky."
});
});
// 404
app.use(function(req, res, next){
res.status(404);
res.render('404');
});
// 500
app.use(function(err, req, res, next){
console.error(err.stack);
res.status(500);
res.render('500');
});
// startup
app.listen(3000, function() {
console.log('Express started on http://localhost:' +
app.get('port') + '; press Ctrl-C to terminate.');
});
在客户端，我使用anuglarjs。我怎样才能在页面打开时获得数据“幸运”并切换到 Angular ？
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal" role="form" ng-submit="update()">
<div class="form-group">
<label class="col-md-2 control-label">Luck</label>
<div class="col-md-4">
<input type="text" class="form-control" name="Lucky"
ng-model="Lucky" value='{{lucky}}'/>
</div>
</div>
<div class="form-group">
<div style="padding-left:300px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</form>
</div>
</div>
</div>
在 Angular 应用程序中，我想处理数据来处理一些事情。
var myApp = angular.module('myApp', []);
myApp.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('{[{');
$interpolateProvider.endSymbol('}]}');
});
myApp.controller('myCtrl', function ($scope) {
$scope.update= function () {
$scope.lucky = 'hello world, lucky guy!';
};
});
该值设置为“你很幸运。”。但它没有显示。我搜索了一些类似的问题。他们说这与数据绑定(bind)冲突。 如何解决？
最佳答案
首先，您不需要设置 value 属性，但如果您确实需要使用它，只需设置 value="{{lucky}}" (不带单引号)。
主要问题是您的 ngModel 是 Lucky，而它应该只是 lucky。
这是一个基于您的代码的工作演示:
(function() {
'use strict';
angular
.module('myApp', [])
.controller('myCtrl', myCtrl);
myCtrl.$inject = ['$scope'];
function myCtrl($scope) {
$scope.lucky = 'initial value';
$scope.update = function() {
$scope.lucky = 'hello world, lucky guy!';
};
}
})();<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-lg-12">
<form class="form-horizontal" role="form" ng-submit="update()">
<div class="form-group">
<label class="col-md-2 control-label">Luck</label>
<div class="col-md-4">
<input type="text" class="form-control" name="Lucky" ng-model="lucky">
</div>
</div>
<div class="form-group">
<div style="padding-left:300px">
<input type="submit" value="Submit" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>关于javascript - 渲染页面时如何从 Handlebars 获取 Angular 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38734146/