呈现页面时如何从车把获取角度数据答案

【问题标题】：How could I get data for angular from handlebars when the page is rendered呈现页面时如何从车把获取角度数据
【发布时间】：2016-08-03 03:57:07
【问题描述】：

我用数据渲染车把模板。

 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!';
    };


});

该值设置为“你很幸运。”。但它没有显示。我搜索了一些类似的问题。他们说这与数据绑定冲突。如何解决？

【问题讨论】：

标签： javascript angularjs node.js handlebars.js angularjs-ng-model

【解决方案1】：

首先，您不需要设置value 属性，但是如果您确实需要使用它应该只是value="{{lucky}}"（不带单引号）。

主要问题是你的ngModel 是Lucky，而它应该只是lucky。

这是一个基于您的code 的工作演示：

(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>

【讨论】：

您好，谢谢您的回答，但实际上要的数据来自服务器，顺便说一下，我的服务器是nodejs，我的模板引擎是车把。我的问题是如何将数据从服务器传输到我的角度应用程序。我已经更新了我的服务器代码。