如何让HTML translate属性与angular-translate兼容生效？

下面是无需修改angular-translate指令的几种可行办法：

• 使用notranslate类（最推荐）
  Chrome翻译原生支持识别notranslate类，会自动跳过带有该类的元素：

  • 全局阻止页面翻译：给<body>或应用根容器加类

    <body class="notranslate">
      <!-- 你的AngularJS应用内容 -->
    </body>
    

  • 仅阻止特定元素：给目标元素同时添加angular-translate指令和该类

    <div translate="APP_TITLE" class="notranslate"></div>
    

• 全局禁用翻译（meta标签）
  在页面<head>中插入meta标签，直接告知Chrome不要翻译当前页面：

  <meta name="google" content="notranslate">
  

  这种方式不用修改任何应用内元素，适合整个页面都不需要翻译的场景。

• 用translate-compile保留原生属性
  借助angular-translate的translate-compile指令，让编译后的元素保留原生translate属性：

  <div translate="WELCOME_TEXT" translate-compile translate="no"></div>
  

  该指令会让angular-translate完成翻译逻辑后，保留元素上的原生属性，注意适配你使用的angular-translate版本。

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