Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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!

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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
        });
    }  
  };
});
share|improve this answer
    
thanks for your comment! I followed your suggestion and got it to work eventually :) –  AndreiC May 16 at 14:38
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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.