如何在呈现页面时从手柄获取角度数据

问题描述：

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。我怎么能在页面打开并切换到角度时获得数据'幸运'？

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

在角度应用程序中，我想处理数据来处理某些事情。

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


});

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

答

首先，您不需要设置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，我的模板引擎是handlebars。我的问题是如何将数据从服务器传输到我的角应用程序。我更新了我的服务器代码。 –

如何在呈现页面时从手柄获取角度数据

相关推荐