将 'dict' 对象从 Django 模板传递到 Angular 控制器 - 避免 jsonify 和解析

Posted 2023-02-24

【中文标题】将 \'dict\' 对象从 Django 模板传递到 Angular 控制器 - 避免 jsonify 和解析

【英文标题】：Passing 'dict' object from Django Template to Angular Controller - avoid jsonify and parsing将 'dict' 对象从 Django 模板传递到 Angular 控制器 - 避免 jsonify 和解析

【发布时间】：2015-12-10 02:38:19

【问题描述】：

我正在尝试从我的 django 模板调用角度控制器函数，并传递我正在迭代的对象，但它要求我在传递之前先将对象转换为 json，然后在控制器中，我已经再次将 json 解析为对象。

这是sn-p：

Django 模板视图：

class Menu(TemplateView):
    template_name = 'menu.html'

    def get_context_data(self, **kwargs):
        context = super(Menu, self).get_context_data(**kwargs)
        # Using the DRF API to fetch the data for template view
        menus = requests.get('http://127.0.0.1:8000/api/v1/menus/').json()
        context['menu'] = menus
        return context

menu.html：

<div class="row" ng-controller="MenuController as vm">
    <ul>
        % for menu_item in menu.menu_items %
            <li class="col-xs-12 col-sm-6 col-md-4">
                <!-- menu_item is dict type object -->
                <button class="btnRed txtUpper" 
                    ng-click="vm.addToCart(' menu_item|to_json|escapejs ')">
                    Add to cart
                </button>
            </li>
         % endfor %
    </ul>
</div>

to_json 是我的自定义过滤器：

@register.filter
def to_json(value):
    return json.dumps(value)

现在，在我的控制器中，要使用传递的对象，我必须再次将 json 解析为对象：

angular.module('menu', [])

.controller('MenuController', ['$log', function($log) 
    this.addToCart = function(menuItem) 
        menuItem = JSON.parse(menuItem);
        $log.debug('Adding MenuItem to Cart: ' + menuItem);
        $log.debug('Adding MenuItem to Cart: ' + menuItem['id']);
    ;
]);

所以，我有很多事情要做。有一次很好，但如果我必须为每个模板和角度集成都这样做，那就太多了。有什么优雅的方法可以避免这种情况吗？

【参考方案1】：

您似乎对 JS 前端和 REST 后端应该如何工作感到很困惑。这里不需要你的 TemplateView。您的 JS 应该直接向 DRF 端点发出请求，该端点将直接返回 JSON。

【讨论】：

是的，可以做到。但出于某种目的，我在这里写 TemplateView。所以，我需要那个。基本上它是一个多页应用程序，而不是传统的单页应用程序。

好吧，我不太明白你的意思，但你当然不应该从你的视图中对 API 进行请求调用。从 Angular 做。

好的，之前我直接从 Angular 使用 DRF。这就是我创建这些 API 的原因。但现在我想要的是为单独的菜单项设置单独的页面，供爬虫跟踪。使用角度单页应用程序，这是不可能的。这就是我们迁移到 TemplateView 的原因。