如何使用AngularJS指令对MVC局部视图进行数据绑定

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> 

我使用了angular指令来渲染局部视图，在此之前一切正常。在我的angular通用控制器中，我有一个作用域变量：

$scope.Data = data;

data是一个从Rest服务响应中返回的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>

我的问题是，如何将父作用域传递给Angular指令，以便能够在局部视图中进行数据绑定。我错过了什么吗？提前致谢。

- Jonnathan Molina Prada

Answer 1

我认为手动使用$http.get获取模板并将其插入到DOM中没有任何用处。你只需要在指令配置中提供templateUrl的值，Angular就会帮你获取模板并编译它。

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>

- jad-panda

---

谢谢，你是对的，不需要调用$http.get了，但我仍然无法访问父级scope，我只能通过部分视图中的根scope进行访问，但这不是我想要的。还有其他想法吗？ - Jonnathan Molina Prada

你没有在指令内创建隔离作用域，因此应该能够访问 partnersInfoView 指令的父级作用域。 - jad-panda

谢谢，现在它像魔法一样工作了。最后问题有点不同，因为我忽略了自定义指令，它被用在Bootstrap模态框中。但是你的答案真的很有帮助，解决了最初的问题。 - Jonnathan Molina Prada

Answer 2

你可能缺少的是模板编译。你需要在success处理程序中使用$compile服务：

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

    element.append(linkedElement);
});

- Bartosz Gościński

---

谢谢，我尝试使用templateUrl而不是$http.get，这样就不需要编译了。 - Jonnathan Molina Prada