在特定范围内禁用 angular 指令？

Question

我们正在使用第三方库angular translate，指令名称是data-translate。但是我们的合作伙伴有一个 js 文件注入到我们的页面，他们使用 jquery 找到相同的指令 "data-translate" 然后翻译元素。所以每次 angular 翻译都会覆盖它。

样本：

<script src="angular-translate">//it will search data-translate and make the translate by it's key</script>
<script src="jquery-translate">//it will search data-translate and make the translate by it's key</script>
<header data-translate="headerKey"></header>
<div data-translate="translateKey"></div>
<footer data-translate="footerKey"></footer>

最后会是

<header data-translate="headerKey">angular-translate</header>
<div data-translate="translateKey">angular-translate</div>
<footer data-translate="footerKey">angular-translate</footer>

但我需要的是：

<header data-translate="headerKey">angular-translate</header>
<div data-translate="translateKey">jquery-translate</div>
<footer data-translate="footerKey">angular-translate</footer>

所以我想问一下是否可以在特定范围内禁用 angular 指令？

Answer 1

我找到了一种方法来处理这个问题，方法是在 angular-translate 指令 link 函数之上添加代码：

if($scope.disableTranslate){return;}

并为 disableTranslate 添加我自己的指令：

app.directive('disableTranslate', [function() {
      return {
        restrict: 'A',
        controller: ['$scope', function($scope) {
          $scope.disableTranslate = true;
        },],
      };
    },])

这样我就可以使用 disable-translate 指令来声明元素的范围不是由 angular-translate 而是 jquery-translate.

翻译的

在特定范围内禁用 angular 指令？

disable angular directive on specific scope?

jquery

angularjs

angular-translate