AngularJS+Django项目登录模板触发TemplateSyntaxError: Invalid filter: 'translate'

嗨，我完全懂你碰到的这个麻烦——在Django渲染的登录模板里用angular-translate的translate过滤器时，Django把它当成了自己的模板过滤器，直接抛出Invalid filter: 'translate'的错误。核心原因就是Django和AngularJS的模板语法撞车了：两者都用{{ }}做插值符号，也都用|表示过滤器，Django会优先解析模板里的语法，自然不认识前端的translate过滤器。下面给你几个实用的解决办法：

方法一：用Django的verbatim标签包裹AngularJS代码 #

Django自带的verbatim标签就是用来解决这种冲突的，它会告诉Django：“这段内容你别管，直接原样传给浏览器就行”。这样AngularJS就能正常处理translate过滤器了。

比如你原来的登录模板代码是：

<label>{{ 'Username' | translate }}</label>

改成这样就行：

{% verbatim %}
<label>{{ 'Username' | translate }}</label>
{% endverbatim %}

如果有多处需要翻译的内容，直接把整个包含AngularJS翻译代码的区块用verbatim包裹，不用逐行添加。

方法二：修改AngularJS的插值符号 #

另一种彻底解决冲突的方式，是把AngularJS默认的{{ }}插值符号换成Django不会解析的，比如[[ ]]。

在你的loginApp配置文件里添加$interpolateProvider的配置：

angular.module('loginApp', ['pascalprecht.translate'])
  .config(function($interpolateProvider, $translateProvider) {
    // 替换AngularJS的插值符号
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');

    // 保留你原来的angular-translate配置
    $translateProvider.useStaticFilesLoader({
      prefix: '/i18n/',
      suffix: '.json'
    });
    $translateProvider.preferredLanguage('en');
    // 其他翻译相关配置...
  });

之后在登录模板里就可以用新的插值符号写翻译了：

<label>[[ 'Username' | translate ]]</label>

这种方法的好处是不用在模板里加额外的Django标签，一劳永逸解决语法冲突问题。

额外提醒 #

别忘了确认你的登录模板已经正确引入了AngularJS、angular-translate以及loginApp的相关脚本，否则就算解决了语法冲突，翻译功能也不会生效。比如在模板底部添加类似这样的引用：

<script src="/static/js/angular.min.js"></script>
<script src="/static/js/angular-translate.min.js"></script>
<script src="/static/js/loginApp.js"></script>

内容的提问来源于stack exchange，提问作者Naila Akbar