How to data-bind an mvc partial view using angularjs directives

Question

I have the following angularjs directive:

app.directive("partnersInfoView", function ($http) {
    return {
        restrict: 'A',
        link: function ($scope, element) {
            $http.get("/home/PartnerInfoTab") // immediately call to retrieve partial
              .success(function (data) {
                  element.html(data);  // replace insides of this element with response
              });
        }
    };
});

which basically goes to an MVC controller and returns a partial view

public ActionResult PartnerInfoTab()
{
    return PartialView("../ManagePartners/PartnerInfoTab");
}

in the parent view i have the following declaration:

<div id="genericController" ng-controller="GenericController">
    <div partners-info-view></div>
</div>

that is making use of the angular directive to render the partial view, so far everything works great. Inside of my angular genericController i have a scope variable:

$scope.Data = data;

where data it's a json object that comes as response from a Rest Service

Json Response e.g.

{[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

The issue im having is that i cannot bind the $scope.Data variable in the directive template:

 <div id="PartnerInfoTab">
    <div class="form-group">
        <label class="col-md-2 control-label">Name</label>
        <div class="col-md-8">
            <input id="txt_name" class="form-control" type="text" ng-model="Data.firstName">
        </div>
    </div>
</div>

My question is, How do you pass the parent scope to the angular directive in order to be able to data-bind the elements in the partial view. What am i missing ??

Thanks in advance.

jad-panda · Accepted Answer · 2015-05-24 03:58:40Z

I don't see any use of fetching template manually using $http.get and then inserting it to DOM. you can simply give templateUrl value in directive configuration and angular will fetch the template and compile it for you.

app.directive("partnersInfoView", function ($http) {
     return {
           restrict: 'A',
           templateUrl: '/home/PartnerInfoTab',
           link: function (scope, element, attr) {
               // Do linking
           }
     };
});

And, your partnersInfoView does not create isolated scope. so, you can access values of partnersInfoView's parent scope value. see the below snippet.

var app = angular.module('app', []);

app.run(function($templateCache) {
  // Simulating the fetching of /home/PartnerInfoTab template
  var template = '<div id="PartnerInfoTab">' +
    '<div class="form-group">' +
    '<label class="col-md-2 control-label">Name</label>' +
    '<div class="col-md-8">' +
    '<input id="txt_name" class="form-control" type="text" ng-model="Data[0].firstName">' +
    '<input id="txt_name" class="form-control" type="text" ng-model="Data[1].firstName">' +
    '<input id="txt_name" class="form-control" type="text" ng-model="Data[2].firstName">' +
    '</div>' +
    '</div>' +
    '</div>';

  $templateCache.put('/home/PartnerInfoTab', template);
});

app.controller('GenericController', function($scope) {
  $scope.Data = [{
    "firstName": "John",
    "lastName": "Doe"
  }, {
    "firstName": "Anna",
    "lastName": "Smith"
  }, {
    "firstName": "Peter",
    "lastName": "Jones"
  }];
});

app.directive("partnersInfoView", function($http) {
  return {
    restrict: 'A',
    templateUrl: "/home/PartnerInfoTab",
    link: function($scope, element) {
      // linking
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div id="genericController" ng-controller="GenericController">
    <div partners-info-view></div>
  </div>
</div>

Thanks you're right no need to call $http.get, but still not having access to the parent scope,i only have access trought the root scope within the partial view, but this is not what i want. Any other idea ?
You are not creating isolated scope inside directive, so you should be able to access parent scope of partnersInfoView directive
Thanks, it's working like a charm now, at the end the issue was a litle bit different, since i ommited the custom directive it's being use inside a bootstrap modal. but your answer was really helpfull and solves the initial post.

Bartosz Gościński · Accepted Answer · 2015-05-23 19:06:39Z

0

What you are missing is probably compilation of your template. What you have to do is use $compile service in your success handler:

.success(function (data) {
    var linkingFunction = $compile(data); // compile template
    var linkedElement = linkingFunction($scope); // and link it with your scope

    element.append(linkedElement);
});

answered May 23, 2015 at 19:06

Bartosz Gościński

1,5801 gold badge16 silver badges29 bronze badges

1 Comment

Jonnathan Molina Prada Over a year ago

Thanks, i tried using templateUrl instead of $http.get so compiling is not needed anymore.

Collectives™ on Stack Overflow

How to data-bind an mvc partial view using angularjs directives

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related