Question

我在获取一个简单的嵌套视图时遇到问题，以显示我想要传递给它的数据。

父视图加载嵌套的... 请注意，如果我在此之前{{opc.org.address}}，它确实会泄露数据。

<div ui-view="address" addressData="opc.org.address"></div>

地址模板...... 请注意，如果我更改为{{opc.org.address。（whatever）}}，我可以看到数据正常。

<div class="addressWrapper" ui-view>
<span class="address">{{ addressData.address1 }}</span><br />
<span class="address2" ng-if="addressData.address2">{{ addressData.address2 }}<br />></span>
<span class="city">{{ addressData.city}}</span>,
<span class="state">{{ addressData.state}}</span>&nbsp;
<span class="zip">{{ addressData.postalCode}}</span>
<span class="country" ng-if="addressData.countryCode"><br />{{ addressData.countryCode }}</span>

我们通过Typescript和ui-router运行该网站。这是加载父视图和地址视图的路由器文件部分。

.state('search.orgProfile', {
        url: '/orgs/:externalOrgId',
        views: {
            '': {
                templateUrl: 'app/orgs/org-profile.tmpl.html',
                controller: 'OrgProfileController',
                controllerAs: 'opc',
                resolve: {
                    org: function (orgProfileService: IOrgProfileService, $stateParams: any) {
                        return orgProfileService.getOrgProfile(<string>$stateParams.externalOrgId)
                            .then(function (orgDetails: IOrg) {
                                return orgDetails;
                            });
                    },
                    relationships: function (relationshipsService: IRelationshipsService, org: IOrg) {
                        return relationshipsService.getRelationships(org.id, 0, Constants.PAGE_SIZE)
                            .then(function (relationships: RelationshipModel[]) {
                                return relationships;
                            });
                    },
                    notes: function (notesService: INotesService, org: IOrg) {
                        return notesService.getNotes(Constants.NOTES_TYPE_ORG, org.id)
                            .then(function (theNotes: NoteModel[]) {
                                return theNotes;
                            });
                    }
                }
            },
            'address@search.orgProfile': {
                templateUrl: 'app/components/address/address.tmpl.html'
            }
        }
    });

运行页面时，我只看到“，”。因此它以角度运行，但它没有看到我传入的addressData。我错过了什么吗？我是否需要在其他地方定义addressData？

Answer 1

范围是继承状态/视图之后继承的。

您应该可以在视图模板中使用{{opc.org.address}}，在视图控制器中使用$ scope.opc。它将搜索父范围。请注意初始化父作用域上的字段。例如，如果在进行异步加载之前没有将值设置为null，而是在视图的控制器中执行此操作。你将有2个不同的opc对象。

https://github.com/angular-ui/ui-router/wiki/multiple-named-views

没有任何迹象表明您可以将参数传递给视图，但我认为您不需要。

由于视图是国家内部的，只需使用父级的范围。

编辑：评论之后：我建议使用指令以通用方式表示addressData，并能够将它们绑定到范围。视图用于状态的不同部分/它们表示完全不同的数据（例如：标题/内容/页脚视图），或者它们用于表示从范围继承的一些数据。所以他们强烈地束缚于父母的状态（如果有的话）并且你不能将它们分开。如果你需要分离某些东西并将它绑定到不同的状态/范围，那么这就是指令。

Answer 2

解决方案是将控制器添加到嵌套视图，并将addressData设置为在主视图中解析的组织地址。花了一些时间来探索它，但是一旦我把它插入一切就很好了！

            'address@search.orgProfileHome': {
                templateUrl: 'app/components/address/address.tmpl.html',
                controller: function ($scope: any) {
                    $scope.addressData = $scope.$parent.$parent.opc.org.address;
                }
            }

角度多视图无法获取数据

2 个答案: