指令

时间:2015-12-15 09:52:02

标签: javascript angularjs asp.net-mvc asp.net-mvc-4

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

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指令在我的视图中正确呈现。但是我不想在指令中指定完整的模板url ['Views / NgTemplates / ClusterButton.html']。我需要像模板/ ClusterButton一样缩短它。它需要跟踪角度js路由并需要重定向到'Views / NgTemplates / ClusterButton.html'。我不想让mvc路由参与这个过程。有人知道实现这个的正确方法吗?我浏览了很多网站。但大多数人都说使用ng-view进行视图渲染。我想在角度路由中指定指令的模板url。

1 个答案:

答案 0 :(得分:1)

据我所知,Angular并没有内置任何内容来解决这个问题,但是有一些策略来处理你的情况:

  1. 您可以使用&#34; grunt-angular-templates&#34;它将您的模板文件放入javascript文件中,以便将它们放入&#34;缓存&#34;。它使用模板的路径作为缓存键,因此您只需将路径更改为&#34; ClusterButton.html&#34;并确保你处理&#34; angular-template&#39;生成相同的密钥。

  2. 使用<base />标记。问题是你的所有静态资源都是相对的。

  3. 只需创建一个常量,该常量包含每次重复的路径部分,并使用以下内容构建路径:templateUrl: myConstats.directivesPath + '/ClusterButton.html'