disable angular directive on specific scope?

Question

We are using third party library angular translate, which directive name is data-translate. But our partner has a js file inject to our page, they use jquery find same directive "data-translate" then translate the element. So every time angular translate will override it.

Sample:

<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>

Finally this will be

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

But what I need is:

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

So I want to ask if it is possible to disable angular directive on specific scope?

Answer 1

I find out a way to handle this, by adding the code on top of the angular-translate directive link function:

if($scope.disableTranslate){return;}

And add my own directive for disableTranslate :

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

so that I can use disable-translate directive to announce the scope of the element are not translate by angular-translate but jquery-translate.