Chargement de la vue partielle dans la vue principale AngularJS

J'ai une vue partielle, à qui j'ai l'intention d'inclure dans des pages différentes.

J'ai essayé la commande suivante pour charger la vue partielle, mais la vue n'affiche pas les valeurs stockées dans le modèle.

Angulaire de contrôleur:

//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 Contrôleur:

public ActionResult SettingsList()
{
    return PartialView();
}

Vue: Principaux

<body ng-app="AngularAdmin" ng-cloak>
<div ng-controller="SettingsCtrl" id="top" ng-init="init()">
    <br />
    <div id="settingsList" >

    </div>

Vue:vue partielle

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

Question:
Je ne peux pas afficher les paramètres de données que je peux voir {{ items }} et rien d'autre dans la vue.

OriginalL'auteur RandomUser | 2014-10-08

4

La meilleure façon d'y parvenir est de créer un "settingsList" directive et de définir la templateUrl à l'url de la vue partielle. Vous pourriez se débarrasser de cette:
```
CommonService.SettingsListView_get(function (callback) {  
angular.element('#settingsList').html(callback);
});
```
et la remplacer:
```
<div id="settingsList" >
</div>
```
:
```
<div settingsList></div>
```
Si, pour une raison quelconque, cela n'est pas possible dans votre situation, essayez de changer votre contrôleur de code suivantes (vous aurez besoin d'injecter de l' $compiler service):
```
CommonService.SettingsListView_get(function (callback) {  
var element = angular.element(callback);
$compile(element)($scope);
angular.element('#settingsList').append(element);
$scope.digest();
});
```
Existe-il des erreurs dans la console?
Si vous frappez un point de rupture dans votre contrôleur, $champ d'application.groupes contient exactement ce que vous pensez qu'il devrait? ie - un objet dont les clés sont des chaînes de caractères et dont les valeurs sont des tableaux d'objets.

OriginalL'auteur Fordio

ce code fonctionne bien :

CommonService.SettingsListView_get(function (callback) {  
var element `enter code here`= angular.element(callback);
$compile(angular.element('#settingsList').append(element))($scope);
});

OriginalL'auteur HamidReza

Vous devez vous connecter pour publier un commentaire.