我正在 MVC 中构建一个 Angular 应用程序。我在我的应用程序中创建了一个 Angular Directive(指令),如下所示。
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>
现在, Angular Directive(指令)在我看来已正确渲染。但我不喜欢在指令中指定完整的模板 url ['Views/NgTemplates/ClusterButton.html']。我需要像 template/ClusterButton 一样缩短它。它需要跟踪 Angular js 路由并需要重定向到“Views/NgTemplates/ClusterButton.html”。我不想让mvc路由参与这个过程。有人知道实现这个的正确方法吗?我浏览了很多网站。但大部分内容都是关于使用 ng-view 进行 View 渲染。我想在 Angular 路由中指定指令的模板url。
最佳答案
据我所知,Angular 没有内置任何东西来解决这个问题,但是有一些策略可以处理您的情况:
您可以使用“grunt-angular-templates”之类的东西,它会获取您的模板文件并将其放入 JavaScript 文件中以“缓存”它们。它使用模板的路径作为缓存键,因此您只需将路径更改为“ClusterButton.html”,并确保处理“Angular-template”以生成相同的键。
使用
<base />
标签。问题是您的所有静态资源都将与之相关。只需创建一个常量来保存每次重复的路径部分,并使用该常量构建路径,例如:
templateUrl: myConstats.directivesPath + '/ClusterButton.html'
关于javascript - 指令中 templateUrl 的 Angular 路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34285914/