Загрузка частичного представления в основной вид AngularJS

У меня есть частичный вид, который я планирую включить в разные страницы.Загрузка частичного представления в основной вид AngularJS

Я попытался выполнить следующее, чтобы загрузить частичный вид, но в представлении не отображаются значения, хранящиеся в модели.

Угловая контроллер:

//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(); 
}

Вид: Основное

<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 }} и ничего в представлении.

источник

2014-10-08 RandomUser

Предпочтительный способ достижения этой цели - создать директиву «settingsList» и установить templateUrl в URL-адрес частичного представления. Вы можете избавиться от этого:

CommonService.SettingsListView_get(function (callback) { 
     angular.element('#settingsList').html(callback); 
    });

и заменить это:

<div id="settingsList" > 

    </div>

с этим:

<div settingsList></div>

Если по каким-то причинам это не возможно в вашей ситуации, попробуйте изменить ваш код контроллера следующий (вам нужно будет ввести услугу компиляции $):

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

источник

2014-10-08 09:47:59 Fordio

Существует ли какая-либо ошибка в консоли? – Fordio

Если вы нажмете точку разрыва в своем контроллере, то $ scope.groups содержит именно то, что вы думаете, что нужно? т.е. - объект, ключи которого являются строками и значениями которых являются массивы объектов. – Fordio

этого кода работает хорошо:

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

источник

2016-10-01 09:46:08 HamidReza

Загрузка частичного представления в основной вид AngularJS

ответ

Смежные вопросы