ASP.NET MVC Partial View in an AngularJS directive

问题

I'm currently working on an ASP.NET MVC project to which some AngularJS was added - including some AngularJS directives. I need to add to an AngularJS directive a MVC partial view. Obviously,

@Html.Partial("_PartialView", {{name}}) 

doesn't work.

So far all my searches online provided no help.

Any idea how I could render a partial view inside an Angular directive?

Thanks!

回答1:

Angular exists strictly on the client side whereas MVC views exist on the server side. These two cannot interact directly. However, you could create an endpoint in which your partial view is returned as HTML. Angular could call this endpoint, retrieve the HTML, and then include it inside a directive.

Something like this:

app.directive("specialView", function($http) {
  return {
    link: function(scope, element) {
      $http.get("/views/partials/special-view") // immediately call to retrieve partial
        .success(function(data) {
          element.html(data);  // replace insides of this element with response
        });
    }  
  };
});

回答2:

app.directive("myDirective", ['', function () {
 return {
      restrict: 'A',
        scope: {
            foo: '='
        },
        templateUrl: '/home/_myDirectivePartialView',
        }]
    } }]);

Just need to use templareURL and specify the route to get the partial view.

来源：https://stackoverflow.com/questions/23633863/asp-net-mvc-partial-view-in-an-angularjs-directive