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