javascript - 如何使用 Angular 模块 'ui-route' 在指令中查找 templateUrl 并且不会在 MVC .NET 上出现错误

Question

如何使用 Angular 模块“ui-route”在指令内查找 templateUrl 并且不在 MVC .NET 上出现错误“”NetworkError: 403 Forbidden - http://www.myapp.com/~/App/XV-Directives/form-input-text-template.vbhtml ”

1 个解决方案:这是一个答案，没有使用 MVC 项目的 webconfig 的 Angular “ui-rout”ClickHere ;此解决方案允许任何人查看您的应用程序文件

var xvFormCreator = function () {
    //pass the template name and the data source of the template
    return {
        restrict: 'EA',
        scope: {                                                                                    
            sourceData: '=',
        },
        templateUrl: '~/App/XV-Directives/form-input-text-template.vbhtml'
    };
};


// html template string form  



/*  '  <div  class="form-group">' +
                              '<div class="col-md-6">' +
                                        '<label class="text-info">{{ sourceData.Qestion }} :</label>' +
                                 '</div>' +
                               '<div class="col-md-6">' +
                                                '<textarea' +
                                                '	  name="{{ sourceData.Qestion }} "' +
                                                '	  class="form-control"' +
                                                '     rows="1"'+
                                                '	  placeholder="{{sourceData.TemplateType }}"' +
                                                '	  value="{{ sourceData.Answer }}"></textarea>' +
                                '</div>' +
                      ' </div>'        


html template 

<div class="form-group">
    <div class="col-md-6">
        <label class="text-info">{{ sourceData.Qestion }} :</label>
    </div>
    <div class="col-md-6">
        <input name="{{ sourceData.Qestion }} "
               class="form-control"
               type="text"
               placeholder="{{sourceData.TemplateType }}"
               value="{{ sourceData.Answer }}" />
    </div>
</div>*/

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 1

MVC 有它自己的路由方法，您遇到的主要问题是您使用原始 View 作为模板，这在 mvc、asp.net 范例中并不是最佳的。

对我来说，解决方案非常简单，坚持在服务器端使用 mvc 方法，并根据要渲染的 View 为模板定义路由。

换句话说，不要使用 ~/App/XV-Directives/form-input-text-template.vbhtml，而是使用 Controller 创建一个路由，该 Controller 将返回模板所需的 View ，但它不会如果 View 只是没有模型的简单 html View 也没关系，重要的是你将拥有一条像“/home”、“/home/action”、“/home/template1”或任何你想要的名称的路线想在那里使用。

一旦您使用定义的路由，请将其用作客户端模板中的 URL，如下所示:

var xvFormCreator = function () {
    //pass the template name and the data source of the template
    return {
        restrict: 'EA',
        scope: {                                                                                    
            sourceData: '=',
        },
        templateUrl: '/home/template1'
    };
};

顺便说一下，符号~在客户端不起作用(因为仅在mvc服务器端上下文中起作用)尝试对您的任何其他资源使用应用程序的相对完整路径有。

尝试一下，希望有帮助!