11

我正在使用 Visual Studio 2012 来编辑 HTML 和 JavaScript。我通过在内联脚本标签中使用部分视图来添加模板（参见下面的代码）。AngularJS 是一个 Javascript 框架，要求类型为text/ng-template，但 Visual Studio 不会将其识别为 HTML 并且不提供语法高亮。如果类型是text/HTML一切正常。

我的问题：Visual Studio 2012 中是否有一种方法可以关联自定义脚本类型来进行 HTML 语法突出显示？该解决方案不仅适用于 . text/ng-template，还适用于您希望 HTML 语法突出显示的其他类型。

<script type="text/ng-template" id="filterOrder.html">
    <!-- Sidebar comment-->
    Search: <input ng-model="query"/> 
    Sort by: 
    <select ng-model="orderProp">
        <option value="name">Alphabetical</option>
        <option value="age">Newest</option>
    </select>
    <div id="status">Current filter: {{query}}</div>
</script>
4

3 回答 3

4

I couldn't convince VS2012 to highlight the text/ng-template scripts, so I resorted to using text/template and added a bit to my startup code. This will enumerate the script tags of whatever type you want and add them to $templateCache. 

    var app = angular.module('app', [...]);

    app.run(function ($templateCache) {
        // <script type="text/ng-template"> ... is preferred, but VS 2012 doesn't give intellisense there
        angular.element('script[type="text/template"]').each(function(idx, el) {
            $templateCache.put(el.id, el.innerHTML);
        });
    });

text/template triggers HTML intellisense in my setup.

<script type="text/template" id="home.html">
    <h3>HTML intellisense, code completion, and formatting!</h3>
</script>
于 2014-02-26T03:24:12.193 回答
2

这就是我所做的：

@using (Html.NgTemplate("Text"))
{
    <div class="control-group">
        <label class="control-label">{{item.label}}</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" ng-model="item.value">
        </div>
    </div>
}

Visual Studio 不知道它是一个脚本标签，并让我完全自动完成。

于 2014-08-19T04:12:53.037 回答
1

使用 Trey Mack 的回答，我无法在 class="" 中获得 css 类的列表。

但是，通过将标记类型更改为 text/html 并修改 app.run，我得到了语法和 CSS 类名列表。

<script type="text/html" id="home.html">
    <h3>HTML intellisense, code completion, and formatting!</h3>
</script>

然后...

var app = angular.module('app', [...]);

app.run(function ($templateCache) {
    // <script type="text/ng-template"> ... is preferred, but VS 2012 doesn't give intellisense there
    angular.element('script[type="text/html"]').each(function(idx, el) {
        $templateCache.put(el.id, el.innerHTML);
    });
});

PS我正在使用VS 2015

于 2016-12-08T15:23:54.347 回答