2016-02-23 87 views
1

我一直在搜索周圍下午試圖弄清楚如何使用Typescript來改變我的麪包屑路徑中的span元素的html,或者得到一個角度語句來評估/編譯在jQuery選擇器中。我發現的最接近的是使用$ compile,但我不確定這是否可以工作,因爲直到我的解決方案完成之後纔有數據?如果會的話,我需要了解將$ compile注入應用程序的位置。Typescript - 更改DOM元素內部HTML?

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

接觸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?

注意我們使用angular-util-sui-breadcrumbs來生成BCT ......它目前不支持用我們嵌套的命名視圖插入到BCT的解決方案。這就是爲什麼我需要能夠在事後修改BCT dom的原因。

回答

0

,或者可以我的檔案服務的編輯以某種方式一旦檢索聯繫人信息的DOM

是。導出範圍上的內容並在界面中使用該內容{{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

+0

我還有一個問題angularjs。你願意對此發表評論嗎?發佈答案的用戶在沒有詳細說明的情況下起飛。這裏是鏈接:http://stackoverflow.com/questions/35588344/how-do-i-connect-this-interval-service-to-a-view – CodeMed

+0

你可能誤解了我的問題。你可以在我的聯繫人檔案html中看到我已經在我的html中獲得了值。我遇到的問題是獲取角度值到jquery選擇器中。否則,請修改打字稿控制器或服務內的dom。 – NikZ

+0

@NikZ請參閱更新。我不認爲我誤解了你的問題。 – basarat