Как данных связать MVC частичное представление, используя angularjs директивы

Question

У меня есть следующий angularjs директиву:

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

, которая в основном идет на контроллер MVC и возвращает частичное представление

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

в я имею следующее заявление:

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

, который использует угловую директиву чтобы сделать частичный вид, пока все отлично работает. Внутри моего углового genericController я иметь переменную Область применения:

$scope.Data = data; 

где данные это объект JSON, который поставляется в качестве ответа от отдыха Сервис

JSON ответ, например,

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

Проблема им с в том, что я не могу связать переменную $ scope.Data в шаблоне директивы:

<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> 

Мой вопрос, Как вы передаете родительскую область к угловому директивы в чтобы иметь возможность привязывать данные к элементам в частичном представлении. Что мне не хватает?

Заранее спасибо.

Answer 1

Я не вижу использование выборки шаблона вручную с помощью $http.get, а затем вставить его в DOM. вы можете просто дать значение templateUrl в директивой конфигурации, а угловая заберет шаблон и скомпилирует его для вас.

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

И ваш partnersInfoView не создает изолированную область видимости. поэтому вы можете получить доступ к значениям родительской области partnersInfoView. см. ниже фрагмент.

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>

Answer 2

Что вам не хватает, вероятно, compilation вашего шаблона. То, что вы должны сделать, это использовать $compile службу в вашем success обработчика:

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

    element.append(linkedElement); 
});