在后端将值从后端传递给AngularJS的最佳方法是什么？我正在使用Django并且模板能够吐出我需要的值,但是我不确定将这些值传递给AngularJS的最佳做法是什么.
想想一篇博客文章及其评论,如果我有一个AngularJS服务,通过将帖子ID传递给服务来检索某个博客文章的所有评论,Django正在呈现HTML模板,它确实知道帖子ID是什么,但是我需要将此帖子ID传递给AngularJS,然后传递给服务.
一个想法是将其隐藏<input>并将此输入分配给模型.不太吸引人.
另一个是有一个指令并将一个属性中的这个值传递给这个指令,这样我就可以访问这个属性的值:
// Django (or any backend) is rendering {{ object.value }}
<div class="myDirective" data-object-id={{ object.value }}>
...
</div>
angular.module('myDirectives', []).
directive('myDirective', function() {
return {
restrict: 'C',
transclude: false,
link: function postLink($scope, $element, $attrs) {
// $attrs.objectId would have the value
}
}
});
这两种方法看起来很好.但我想知道是否有更清洁的方法这样做？遵循AngularJS最佳实践的任何方法？
pko*_*rce 22
如果您只需要从视图中初始化少数模型值,那么该ng-init指令可能就是您要查找的内容:http://docs.angularjs.org/api/ng.directive:ngInit
使用它你可以简单地写:
<div ng-init="myModel=backend-generated-value-here">
...
</div>
说到上面的内容,您可能会有一些困难时间为您的用例找到最佳实践,因为AngularJS专注于Web2.0,全客户端Web应用程序.目前,它无法与服务器端生成内容理想地发挥作用.它可能会在AngularJS的未来版本中发生变化.
如果您只需要为给定的"页面"设置初始值(意味着对视图的后端调用),那么您可以按照演示进行操作.我只会通过javascript设置一个全局变量来使它"更干净",如下所示:
// Django (or any backend) is rendering {{ object.value }}
<script>
var backendVars = {
{{object.name}} : {{object.value}}
//and any other objects, manually parsed
}
</script>
并在自举过程中使用角度读取它.
但是,angularJS是它自己的MVC,因此您可能希望能够设置/获取数据或后端控制器的进程,而无需重新加载整个页面.然后,"最干净"的方法是使Web服务返回您需要的数据(例如,返回JSON的视图)并通过$ http或$ resource服务检索它:
angular.module('myApp', []).
controller('MainCtrl', function($scope, $html) {
$html({
method: 'GET',
url: '/your/JSON/view.json'
}).
success(function(data, status){
$scope.yourData = data;
}).
error(function(data, status){
//whatever you need to do if the data is not available
});
}
另外,我应该注意,你不应该直接将数据和逻辑放在指令上 - 它们用于DOM操作 - 而是在控制器上获取信息,然后通过范围继承,属性或双向将其传递给指令数据绑定.希望能帮助到你.
我相信这样做的正确方法是让服务器使用值提供程序呈现脚本,然后在应用程序中依赖注入它.像这样:
index.php文件:
<html ng-app='myApp'>
<head>
<title>AngularJS Back to Front</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src='index.js'></script>
<?php
$globals = array(
'count' => 1,
'title' => 'Active users',
'users' => array(
'name' => 'john',
'age' => 21
)
);
$globalsJSON = json_encode( $globals )
?>
<script>
myApp.value('globals', <?=$globalsJSON;?>);
</script>
</head>
<body ng-controller="myController">
<div>{{title}}</div>
</body>
</html>
index.js:
var myApp = angular.module( 'myApp', [] );
myApp.controller( 'myController', [ 'globals', '$scope', function( globals, $scope ) {
// Copy globals to scope
for ( var property in globals ) {
$scope[ property ] = globals[ property ];
}
}]);
| 归档时间： |
|
| 查看次数： |
26918 次 |
| 最近记录： |