Fatal编程技术网
  • angularjs/
  • 将局部视图加载到主视图AngularJS中

将局部视图加载到主视图AngularJS中

angularjs asp.net-mvc-4

将局部视图加载到主视图AngularJS中,angularjs,asp.net-mvc-4,partial-views,Angularjs,Asp.net Mvc 4,Partial Views,我有一个局部视图，我计划将其包含在不同的页面中 我尝试了以下方法来加载局部视图，但视图不显示存储在模型中的值 角度控制器： //This gets the required data as JSON AdminService.getSettings(function (callback) { $scope.attributes = callback; $scope.groups = _.groupBy($scope.attributes, "Group"); $scope

我有一个局部视图，我计划将其包含在不同的页面中

我尝试了以下方法来加载局部视图，但视图不显示存储在模型中的值

角度控制器：

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

public ActionResult SettingsList()
{
    return PartialView();
}
MVC控制器：

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

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>


更新设置
属性
描述
价值
取自
可编辑
删除
{{i.AttributeName}
{{i.说明}
{{Heritage}}
更新{{items}}设置
问题：
我无法显示我可以看到的设置数据
{{items}
，视图中没有其他内容。

实现这一点的首选方法是创建一个“settingsList”指令，并将templateUrl设置为部分视图的url。你可以摆脱这个：

CommonService.SettingsListView_get(function (callback) {  
        angular.element('#settingsList').html(callback);
    });
并将其替换为：

<div id="settingsList" >

    </div>
此代码运行良好：

CommonService.SettingsListView_get(function (callback) {  
        var element `enter code here`= angular.element(callback);
        $compile(angular.element('#settingsList').append(element))($scope);
});
如果控制器中出现断点，$scope.groups正好包含您认为应该包含的内容？ie-键为字符串、值为对象数组的对象。