类型记录-更改DOM元素内部HTML？

Question

今天下午，我一直在搜索，试图找出如何使用类型记录来更改我的面包屑跟踪中span元素的html，或者在jQuery选择器中得到一个用于计算/编译的角语句。我发现的最接近的是使用$compile，但我不确定这是否有效，因为直到我的解决方案完成后我才有数据。如果会的话，我需要一只手来理解将$compile注入应用程序的位置。

index.module.ts

angular.module('pccrm', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngResource',
            'ui.router', 'ui.bootstrap', 'feature-flags', 'trNgGrid', 'pascalprecht.translate', 'toastr', 'cgBusy',
            'fixtable', 'angularUtils.directives.uiBreadcrumbs', 'LocalStorageModule'])
...

index.route.ts

...
.state(Constants.SEARCH_CONTACTS_CONTACTPROFILE, {
            url: '/orgs/:externalOrgId/contacts/:profileId',
            data: {
                displayName: 'Contact Profile'
            },
            views: {
                '': {
                    templateUrl: 'app/contacts/contact-profile.tmpl.html',
                    controller: 'ContactsProfileController',
                    controllerAs: 'cpc',
                    resolve: {
                        contactProfile: function (contactProfileService: IContactProfileService, $stateParams: any) {
                            return contactProfileService.getContactProfile(<string>$stateParams.externalOrgId, <string>$stateParams.profileId)
                                .then(function (contactModel: IContact) {
                                    return contactModel;
                                });
                        }
                    }
                }
            }
        })
...

contact-profile.tmpl.html

...
<div class="info-group">
                    <div class="profileImage default">

                    </div>
                    <h4 class="contact-name">{{ cpc.contactProfile.fullName() }}</h4>
                    {{ cpc.contactProfile.title }}<br/>
                    <a ui-sref="search.organizations.orgProfile({externalOrgId: cpc.contactProfile.externalOrganizationId })" ng-if="cpc.contactProfile.externalOrganizationId">
                        {{ cpc.contactProfile.externalOrganizationName }}
                    </a>
                </div>
...

就像..。

<script type="text/javascript">
    $('.breadcrumb li.active span').html(
            $compile("{{ cpc.contactProfile.fullName() }}")(scope));
</script>

在模板html的末尾，做这件事的最佳方法是什么？或者，我的配置文件服务可以在DOM检索到联系人信息后以某种方式编辑它吗？

，注意，，我们正在使用角-util面包屑生成BCT...which，目前不支持用嵌套的命名视图的方式将解析插入到BCT中。这就是为什么我需要能够修改BCT后的事实。

Answer 1

或者，我的配置文件服务可以在DOM检索联系人信息之后以某种方式编辑它吗？

是。导出作用域上的内容并在UI中使用该{{somethingOnScope.contactProfile.fullName()}}。

更多关于范围的信息：https://docs.angularjs.org/guide/scope

更新

你可能误解了我的问题

不是的。我是说不要这样做：

$('.breadcrumb li.active span').html(
            $compile("{{ cpc.contactProfile.fullName() }}")(scope));

相反，html应该如下所示：

<ul class="breadcrumb">
   <li class="active">
       <span>{{somethingOnScope.contactProfile.fullName()}}</span>
   </li>
</ul>

然后您就不需要jquery了