29

将值从后端传递到前端的 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 最佳实践的任何方法？

4

3 回答 3

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 的未来版本中发生变化。

于 2012-11-24T20:05:48.930 回答
9

如果您只需要为给定的“页面”（意味着对视图的后端调用）设置初始值，那么您可以按照您的演示进行操作。我只会通过 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 操作的——而是在控制器上获取信息，然后通过范围继承、属性或 2-way 将其传递给指令数据绑定。希望能帮助到你。

于 2012-11-24T16:49:06.800 回答
9

我相信正确的方法是让服务器使用value provider呈现脚本，然后将其依赖注入到您的应用程序中。像这样：

索引.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 ];
    }
}]);
于 2014-07-11T11:25:04.110 回答