问题描述
我有一个部分视图，我计划将其包含在不同的页面中。
我尝试了以下方法来加载部分视图，但该视图不显示存储在模型中的值。
角度控制器：
//This gets the required data as JSON
AdminService.getSettings(function (callback) {
$scope.attributes = callback;
$scope.groups = _.groupBy($scope.attributes, "Group");
$scope.previous = angular.copy($scope.attributes);
//This gets the partial view and adds to the main view
CommonService.SettingsListView_get(function (callback) {
angular.element('#settingsList').html(callback);
});
});
MVC控制器：
public ActionResult SettingsList()
{
return PartialView();
}
查看：Main
<body ng-app="AngularAdmin" ng-cloak>
<div ng-controller="SettingsCtrl" id="top" ng-init="init()">
<br />
<div id="settingsList" >
</div>
查看：部分
<div class="panel-group" id="accordion">
<div style="padding:5px 0"><button ng-click="updateAttributes(attributes)" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Update Settings</button></div>
<div class="panel panel-primary" data-ng-repeat="(items, item) in groups" ng-style="$index < 11 ? panelStyle[$index] : commonPanelStyle">
<div class="panel-heading" ng-style="$index < 11 ? panelHeaderStyle[$index] : commonPanelHeaderStyle">
<a data-toggle="collapse" href="#accordion{{$index}}" ng-style="anchorStyle">
<h4 class="panel-title">
{{ items }}
</h4>
</a>
</div>
<div id="accordion{{$index}}" class="panel-collapse collapse">
<div class="panel-body" ng-style="$index < 11 ? panelBodyStyle[$index] : commonPanelBodyStyle">
<table class="table">
<tr>
<th>Attribute</th>
<th>Description</th>
<th>Value</th>
<th>Taken from</th>
<th>Editable</th>
<th>Delete</th>
</tr>
<tr data-ng-repeat="i in item">
<td> {{ i.AttributeName }} </td>
<td> {{ i.Description }} </td>
<td> <input type="text" ng-model="i.Value" class="form-control" ng-disabled="{{!i.Editable}}" />
</td>
<td><span ng-bind="i.TakenFrom | settingsfilter">{{ Heritage }}</span> </td>
<td><span ng-class="i.Editable | activefilter : { icon1 : 'glyphicon-edit', icon2 : 'glyphicon-remove'}" class="glyphicon" style="font-weight: bolder"></span></td>
<td><span ng-click="deleteAttribute(i.AttributeGuid)" ng-class="i.TakenFrom | deletefilter : 1" class="glyphicon" style="font-weight: bolder"></span></td>
</tr>
</table>
<button style="float:right" class="btn btn-default" ng-click="updateAttributes(item)"><span class="glyphicon glyphicon-floppy-disk"></span> Update <em>{{ items }}</em> Settings </button>
</div>
</div>
问题：
我无法显示在视图中可以看到的设置数据{{ items }}和其他数据。
推荐答案
实现此目的的首选方法是创建一个"settingsList"指令，并将templateUrl设置为部分视图的URL。你可以摆脱这个：
CommonService.SettingsListView_get(function (callback) {
angular.element('#settingsList').html(callback);
});
并替换为：
<div id="settingsList" >
</div>
使用此选项：
<div settingsList></div>
如果由于某种原因，这在您的情况下是不可能的，请尝试更改您的控制器代码，如下所示(您需要注入$Compile服务)：
CommonService.SettingsListView_get(function (callback) {
var element = angular.element(callback);
$compile(element)($scope);
angular.element('#settingsList').append(element);
$scope.digest();
});