CODEWITHSUNDEEP
asp.net-mvcangularjsasp.net-mvc-4angularjs-directiveasp.net-mvc-partialview
AndreiC
AndreiC

Reputation: 1550

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!

Upvotes: 3

Views: 9367

Answers (2)

RolandoCC
RolandoCC

Reputation: 878

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.

Upvotes: 2

JPRO
JPRO

Reputation: 1062

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
        });
    }  
  };
});

Upvotes: 8

Related Questions