Question

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

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

我有.cshtml名为ClusterButtonTemplate.cshtml的文件，我在控制器类中创建了一个部分视图方法来返回此视图。因此angular js指令绑定模板。

我需要删除mvc控制器类中的方法，需要直接引用模板文件。我不想使用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映射到控制器的位置。默认情况下，/Content文件夹会被忽略，因此您可以在其下创建一个名为＆＃34;模板＆＃34;的文件夹。并将其用于URL。

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

Answer 2

您可以尝试使用前导斜杠，因为它是使用相对路径加载的。

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

Answer 3

这非常简单！只需将html文件模板（作为内容）放在您喜欢的文件夹中（即app / phone-list / in project root），然后分配

templateUrl: '/app/phone-list/phone-list.template.html'

到controller templateUrl属性。避免使用视图，模型或控制器文件夹......

在mvc 5项目中使用角度指令模板url中的html文件

3 个答案: