angularjs - 将部分 View 加载到主视图 AngularJS-6ren

angularjs - 将部分 View 加载到主视图 AngularJS

转载作者：行者123 更新时间：2023-12-03 06:43:41

24

4

我有一个部分 View ，我计划将其包含在不同的页面中。

我尝试了以下方法来加载部分 View ，但该 View 不显示模型中存储的值。

Angular Controller :

//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 Controller :

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

View :主要

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

问题:我无法显示设置数据，我只能在 View 中看到 {{ items }} 而没有其他内容。

最佳答案

实现此目的的首选方法是创建一个“settingsList”指令并将 templateUrl 设置为分部 View 的 url。你可以摆脱这个:

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

并替换它:

<div id="settingsList" >

    </div>

这样:

<div settingsList></div>

如果由于某种原因这在您的情况下是不可能的，请尝试更改以下 Controller 代码(您需要注入(inject) $compile 服务):

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

关于angularjs - 将部分 View 加载到主视图 AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26253546/

24

4

0

文章推荐： ms-access - 防止 Autoexec 宏在压缩和修复后运行

文章推荐： javascript - 为什么我的 PhantomJS 脚本挂起？

文章推荐： javascript - Angular 日历逻辑问题(+Plunker 帮助)

文章推荐： assembly - TASM 1.4 - 显示特定颜色的字符串？

java - Vaadin 主视图
我有一个基于 REST 的经典 springboot 应用程序。我想开始使用 Vaadin，以便直接从 java 代码创建 ui 组件。我在他们的教程中发现，您必须使用 @Route('') 创建一
json - 快速登录应用程序后，主视图 Controller 没有响应
为了设计，我使用 Storyboard。主页 View Controller 包含单独 View 中的侧面菜单，我设计了带有 Collection View 的主页。对于侧面菜单，我使用包含 MyNa
c# - UWP 主视图/详细 View
我正在寻找如何为 UWP Win 10 应用程序构建主/详细 View 的好示例，如本页所示:https://msdn.microsoft.com/en-us/library/windows/apps
ios - UISplitViewController 将详细 View 推送到表/主视图
我遇到这个问题，在 iPhone 7 Plus 的横向模式下，当单击设备左侧表格 View 中的单元格时，内容会显示在表格 View 的顶部，或者替换表格 View .在这种情况下， Split Vi
java - Android:更改 Activity 的背景颜色(主视图)
我想改变我的主视图(不是按钮或 TextView )的背景颜色，只是通常是黑色的真实背景......我得到了这个代码: view.setBackgroundColor(0xfff00000); 这在
android - 使用 Wikitude API 自定义 Wikitude 主视图
我正在尝试在 Android 应用程序中使用 Wikitude API，但相关文档很少。那么，有什么办法可以在wikitude View 中添加一个action bar吗？还有一些按钮？因为我只看到
ios - 当分配给 rootViewController 时，主视图 Controller 是否未推送到导航堆栈中？
我正在尝试隐藏 navigationViewControleler 层次结构的桅杆 View Controller 中的工具栏。我创建一个新的 ViewController 作为 RootViewC
ios - 主视图 Controller -> 详细 View Controller 通信
已关闭。此问题不符合Stack Overflow guidelines .它目前不接受答案。要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用，以及
iOS:主视图 -> 详细 View (如何使详细 View 可编辑)
我正在寻找实现可编辑详细 View 的可能性。我的应用程序有一个经典的主 -> 详细 View 设置。苹果文档(http://developer.apple.com/library/ios/#feat
swift - 如何将 subview (如标签)添加到已经有 subview 的 UIViewController 主视图？
我正在使用一个框架，该框架使用其特定控件创建 UIViewControllers。我无法访问其 Storyboard来手动修改它。有没有办法向其 View 添加标签之类的内容并正确定位它，即使 Vie
ios - 将 View Controller 主视图(self.view) subview 移动到 ScrollView
我有带 subview 和应用约束的 View Controller 。问题:我想做的是以编程方式添加 ScrollView 只有 iPhone 4s 设备在 ScrollView 中具有 self
c# - "Detail Children"主视图/详细 View 的 ASP.NET MVC 路由
我有基本的主视图/详细 View 与默认的 ASP.NET MVC 路由配合得很好；但是我想构建一些这样的 URL: /Class/Details/5 -- General Detail view [
ios - 如何更改 Split View Controller 项目的宽度大小(主视图 Controller - 详细 View Controller )？
我需要在 Split View Controller 中更改 View Controllers 的宽度大小。我的意思是第一个 View Controller 的默认值是 320。第二个是 703。我需

首页

博学

6Ren·AI

商城

angularjs - 将部分 View 加载到主视图 AngularJS