呈现页面时如何从车把中获取 angular 的数据

Question

我用数据渲染车把模板。

 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时得到数据'lucky'？

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


});

已设置值 'you are lucky.'。但它没有显示。我搜索了一些类似的问题。他们说这与数据绑定冲突。如何解决？

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

呈现页面时如何从车把中获取 angular 的数据

How could I get data for angular from handlebars when the page is rendered

javascript

node.js

handlebars.js

angularjs

angularjs-ng-model