Provide Syntax Highlighting for <script type="ng-template"> templates

[sparty02]

See the Plug-in Details | Syntax File section at https://github.com/angular-ui/AngularJS-sublime-package

[angelozerr]

You mean to support some syntax coloration for content inside script type="ng-template" like described here https://docs.angularjs.org/api/ng/directive/script

If it that I'm afraid that it's a big task. I'm not sure I will have time to support that.

[sparty02]

Right... in essence, the experience inside of

<script type="ng-template">
   <!-- The following content would have syntax coloring/etc -->
   <div>
       <span>Text</span>
   </div>
</script>

would be the same as if you were just marking up a template in an html file.

[ghost]

Hi, Thanks for AngularJS Eclipse plugin. I'm using it (0.9.0.201504172027) on Eclipse Luna - 20150219-0600. On a aa.html file starting with <div ..., the coloration is working well. But on another file bb.html stating with <script type="text/ng-template" ... the (same) coloration doesn't work (i.e. the coloration works only for the first, and last lines; the last line in </script...).

I'm just looking to have the same coloration that is displayed when I remove the <script tags from bb.html file.

What do you think?

Thanks, Regards,

[angelozerr]

I understand your need, but I have no time to study how to support this feature. Any contribution are welcome!

[angelozerr]

I have tried to support this feature but without success -(

I have tried to add in org.eclipse.angularjs.ui extension point :

    <extension point="org.eclipse.wst.sse.ui.editorConfiguration">
        <provisionalConfiguration
            type="linestyleprovider"
            class="org.eclipse.wst.html.ui.internal.style.LineStyleProviderForHTML"
            target="org.eclipse.wst.html.SCRIPT.type.TEXT/NG-TEMPLATE" />
        <provisionalConfiguration
            type="autoeditstrategy"
            class="org.eclipse.wst.html.ui.internal.autoedit.StructuredAutoEditStrategyHTML"
            target="org.eclipse.wst.html.SCRIPT.type.TEXT/NG-TEMPLATE" />           
    </extension>

org.eclipse.wst.html.SCRIPT.type.TEXT/NG-TEMPLATE is the local type computed by StructuredTextPartitionerForHTML#getScriptingPartitionType with <script type="text/ng-template".

it seems that's is not possible without having an own StructuredTextViewerConfigurationAngular class which registers custom content type returned by getConfiguredContentTypes. I would like to avoid using StructuredTextViewerConfigurationAngular since HTML eidtor can be used with HTML, JSP, PHP, etc

@vrubezhny @piotrtomiak have you an idea how tu support this feature?

[ghost]

Hi, Thanks for trying :-) Unfortunately, I have no skill on Eclipse plugin development :-(. Regards,

[wolfgangmeyers]

As a work-around, I've found that if you temporarily change the open tag from <script> to <div> the editor will treat it as html - although it will complain about invalid html of course :)

[ghost]

Hi Wolfgang, What do you mean by: 'change the open tag from "'? In the file that contains <script type=... ? Thanks, Regards,

[wolfgangmeyers]

Sorry, looks like I needed to use markdown. If I have a ng-template script such as:

<script type="text/ng-template" id="myTemplate.html">
<!-- everything in here isn't syntax highlighed in eclipse-->
</script>

you can temporarily turn on formatting and syntax highlighting by changing it to this:

<div type="text/ng-template" id="myTemplate.html">
<!-- now you should see syntax highlighting here in eclipse -->
</script>

Note that the opening tag has changed from <script> to <div> - then once your changes are done you change it back before testing the page.

[kibbled]

+1 on this feature request, it would be very helpful

[angelozerr]

I have taken long time to try to support it, but I don't know how to support it. See https://github.com/angelozerr/angularjs-eclipse/issues/148#issuecomment-103432689

[damtep]

Hi,

my workaround was to create a new directive similar to angular's 'script' directive:

angular.module('<your module name>').directive('iutScript', ['$templateCache', function($templateCache) {
      return {
        restrict: 'E',
        terminal: true,
        compile: function(element, attr) {
          if (attr.type == 'text/ng-template') {
            var templateUrl = attr.id,
                text = element[0].innerHTML;

            $templateCache.put(templateUrl, text);
          }
        }
      };
}]);

The original 'script' directive has this line: text = element[0].text; but I had to change it to text = element[0].innerHTML;

So, now, to define a template I use:

<iut-script type="text/ng-template" id="/tpl.html">
</iut-script>

Now in Eclipse you get the colors as it is a standard custom directive.

Hope it helps.