如何使用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> 

这是利用角度指令渲染局部视图，到目前为止，一切都很好。在我的角genericController的我有一个范围变量：

$scope.Data = data; 

其中数据它是正值从REST服务

JSON响应例如响应JSON对象

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

遇到的问题IM是，我不能在指令模板中的$ 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的值，而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>

Answer 2

你缺少的东西可能是compilation模板。你所要做的就是在你的success处理程序使用$compile服务：

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

    element.append(linkedElement); 
});