MVC 5中的Angularjs指令templateUrl没有angularjs路由机制答案

【问题标题】：Angularjs Directive templateUrl in MVC 5 without angularjs routing mechanismMVC 5中的Angularjs指令templateUrl没有angularjs路由机制
【发布时间】：2017-05-22 05:14:47
【问题描述】：

我一直在尝试在 Razor 视图 MVC 5 中调用 angularjs 自定义指令 templateUrl，但无法获取文件。在我的项目中，我使用没有 $routeProvider 或 angularjs 路由的 angularjs，因为我的应用程序直接依赖于 mvc 路由。有人可以帮我解决这个问题吗？

These are my templates.... 
~/Areas/Sales/Views/Orders/Edit.cshtml ~/Areas/Sales/Views/Orders/Add.cshtml ~/Areas/Sales/Views/Orders/Update.cshtml ~/Areas/Sales/Views/Orders/Delete.cshtml 

This is my directive. 

app.directive("test", function(){ 
return{ 
restrict:'AE',
scope: { 
emp: '='
},
templateUrl: '~/Areas/Sales/Views/Orders/Edit.cshtml' 
}
});

【问题讨论】：

Claies，我只是想在 MVC 5 中使用带有 templateUrl 选项的指令，但不知道如何在此处加载 templateUrl 文件。你能解释一下吗？
Claies，你能提供任何可行的例子吗？
Claies，你能建议我正确的方法吗，因为我即将创建很多指令，所以在此之前我想清楚在mvc 5
Claies，复制一下，但是如何在 MVC 5 的 templateUrl 中调用 .html 文件？
Claies，我真的要对我的域名或 FQDN 进行硬编码吗？

标签： javascript angularjs asp.net-mvc angularjs-directive

【解决方案1】：

app.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
            when('/index', {
                templateUrl: '/home/index',
                controller: 'QuizController' //new
            }).
            when('/quiz', {
                templateUrl: '/home/quiz',
                controller: 'QuizController' //new
            }).
            otherwise({
                redirectTo: '/index'
            });
    }]);

&lt;div ng-view&gt;&lt;/div&gt;

【讨论】：

Arvind Audacious，我不想在我的应用程序中使用 $routeProvider。而且我不想路由到特定视图，而是想在我的另一个视图中包含一个指令，因为指令起作用。

【解决方案2】：

var elem;
app.directive('parentDirective', function ($http, $compile) {
return {
    restrict: 'E',
    compile: function (element, attrs) {
        var controllerurl = attrs.controllerurl;
        elem = element;

        if (controllerurl) {
          return function(scope,element){
            $http.get(controllerurl + '/GetWizardItems').
            success(function (data, status, headers, config) {
                var x = angular.element('<child-directive></child-directive><child-directive></child-directive>');
                element.append(x);
                $compile(x)(scope);
            });
          }
        }
    }
}
});

【讨论】：

请您用我的解决方案详细说明一下。