指令中templateUrl的角路由

Question

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

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

我已经在Views / NgTemplates文件夹中创建了ClusterButton.html。 我在index.cshtml文件中使用了此指令，如下所示。

<div ng-controller="homeController" class="row clusters_main">
        <div ng-repeat="cluster in Clusters" ng-init="selectedClusterId = '#'">
            <cluster-button info="cluster"></cluster-button>
        </div>
    </div>

现在，角度指令在我的视图中可以正确渲染。 但我不想在指令中指定完整的模板网址['Views / NgTemplates / ClusterButton.html']。 我需要像template / ClusterButton一样缩短它。 它需要跟踪有角度的js路由，并需要重定向到“ Views / NgTemplates / ClusterButton.html”。 我不想让MVC路由参与此过程。 有人知道实现此目标的正确方法吗？ 我浏览了很多网站。 但是大多数内容都涉及使用ng-view进行视图渲染。 我想在角度路由中指定指令的模板网址。

Answer 1

据我所知，Angular并没有内置任何解决方案，但是有一些策略可以处理您的情况：

1. 您可以使用“ grunt-angular-templates”之类的东西，将模板文件拖放到javascript文件中以使其“缓存”。 它使用模板的路径作为缓存键，因此您只需将路径更改为“ ClusterButton.html”，并确保处理“ angular-template”以生成相同的键。

2. 使用<base />标记。 问题在于您所有的静态资源都将与此相对。

3. 只需创建一个常量，该常量将保留每次重复的路径部分，并使用以下方式构建路径： templateUrl: myConstats.directivesPath + '/ClusterButton.html'