angularjs - 在 mvc 5 项目的 Angular 指令模板 url 中使用 html 文件

Question

我正在 MVC 5 中创建一个 angularJs 应用程序。我创建了一个指令，如下所示。

app.directive('clusterButton', function () {
    return {
        restrict: 'E',
        scope: {
            clusterInfo: '=info'
        },
        templateUrl: function(elem, attr){
            return 'ClusterButtonTemplate';
        }
    };
});

我有 .cshtml文件名为 ClusterButtonTemplate.cshtml我在 Controller 类中创建了一个局部 View 方法来返回这个 View 。所以 angular js指令正在绑定(bind)模板。

我需要删除mvc Controller 类中的方法，需要直接引用模板文件。我不想使用 cshtml文件。我需要一个 html模板文件。我创建了一个 ClusterButtonTemplate.html文件。但是在将模板设置如下时，浏览器会显示 404 error .

app.directive('clusterButton', function () {
    return {
        restrict: 'E',
        scope: {
            clusterInfo: '=info'
        },
        templateUrl: function(elem, attr){
            return 'ClusterButtonTemplate.html';
        }
    };
});

我没用 angular js在我的项目中路由。一切都使用 MVC routing 进行管理.我该如何解决这个问题。我需要使用 Angular routing和 MVC routing ?

Answer 1

您需要放置在 MVC 不会尝试将 URL 映射到 Controller 的位置。默认情况下，/Content文件夹被忽略，因此您可以在其下创建一个名为"template"的文件夹并将其用作 URL。

templateUrl: function(elem, attr){
    return '/Content/Templates/ClusterButtonTemplate.html';