Support the translate-namespace directive

[sgilroy]

Namespaces are supported by grunt-angular-translate, but not the https://angular-translate.github.io/docs/#/api/pascalprecht.translate.directive:translateNamespace directive. The translate-namespace directive allows a developer to avoid repeating the namespace in a view by extracting it to a parent element.

That is, given the following example:

    <div translate-namespace="CONTENT">
      <div translate-namespace=".HEADERS">
          <h3 translate id="example_title">.TITLE</h3>
          <h3 translate id="example_welcome">.WELCOME</h3>
      </div>
      <span translate>COMMON.FIRST_LINE</span>
    </div>

Expected:

{
    "CONTENT": {
        "HEADERS": {
            "TITLE": "",
            "WELCOME": ""
        }
    }
    "COMMON": {
        "FIRST_LINE": ""
    }
}

Actual:

{
    "0": {
        "TITLE": "",
        "WELCOME": ""
    }
    "COMMON": {
        "FIRST_LINE": ""
    }
}

[haschu]

+1

[haschu]

Diving a bit more into the grunt-angular-translate code, it turns that supporting the directive isn't that easy. Not because of grunt-angular-translate itself, but because of the occurring problems when using regular expressions in connection with html-tags.

Assuming the following code (ANY could of course be replaced with any html tag):

<ANY translate-namespace="MY.NAMESPACE.">
  <span translate="BAR"></span>
  <span translate="FOO"></span>
</ANY>

Easy task using regex and searching between <ANY>...</ANY>. The expected JSON-output would looks like:

{
  "MY": {
    "NAMESPACE": {
      "BAR": "...",
      "FOO": "..."
    }
  }
}

But what about the following example?

<div translate-namespace="MY.NAMESPACE.">
  <div>
    <span translate="BAR"></span>
  </div>
  <span translate="FOO"></span>
</div>

Now it gets heavy, because we can't just searching between<div>...</div>, because we got a closing </div> tag within our content.

However, a quick (maybe bad?) solution would be using kind of a "closing" html comment like:

<div translate-namespace="MY.NAMESPACE.">
  <div>
    <span translate="BAR"></span>
  </div>
  <span translate="FOO"></span>
</div> <!-- translate-namespace-end="MY.NAMESPACE." -->

Perhaps it's messy, but it makes the job lots of easier.

[haschu]

I could come up with a pull request, if wanted.

Anybody who comes across the same issue can clone my fork and checkout to this branch: https://github.com/haschu/grunt-angular-translate/tree/feature/78

Usage as described above:

<div translate-namespace="MY.NAMESPACE.">
  <div>
    <span translate="BAR"></span>
  </div>
  <span translate="FOO"></span>
</div> <!-- translate-namespace-end="MY.NAMESPACE." -->