AngularJS：スコープなしの文字列で角度コードをコンパイルする

すべてのUIタブを管理する角度サービスがあります。それはアイコン、ラベル、URLなどのタブについて必要なすべての情報を持っているオブジェクトが含まれています。私は1つの私のタブの動的なカウンターを持っているユースケースを持っていますが、それは働いている。AngularJS：スコープなしの文字列で角度コードをコンパイルする

サービススニペット：

angular.module('app.services').service('tabService', function($rootScope, $route, $location) { 

    var tabs = { 
     "/front": { 
      "search": { 
       label: "Search", 
       url: "/search", 
       classIcon: "fa fa-search", 
       urlMatchAddt: ['/searchResults','/productDetails'] 
      }, 
      "order": { 
       label: "Order", 
       url: "/cart", 
       classIcon: "fa fa-shopping-bag" 
      } ....

HTMLコード：index.htmlを（tabServiceは私のBaseCtrlコントローラに注入される）

<body ng-app="app" ng-controller="BaseCtrl"> 
... 
<li ng-repeat="t in tabService.getTabs()" ng-class="{active: tabService.isActiveTab(t.url)}" ng-cloak> 
        <a href="#{{t.url}}"><i class="{{t.classIcon}}" aria-hidden="true" ng-bind-html=""></i>&nbsp;<span ng-bind-html="t.label | trustHTML"></span></a> 
       </li> 
.... 
</body>

それでは、私は例えばやろうとしていますがlabelであります私のタブのフィールド私は何かを入れたい

label: "Order - {{counter}}"

だから毎tim e {{counter}}変数を更新すると、自分のラベルも更新されます。 labelにはHTMLコードが含まれているので、私はng-bind-html指令を使用しています。

現在、変数に醜い$watchを実行しています。変更すると、手動で、ラベル値を更新された値を含む新しい文字列で完全に上書きしています。

私は$compileを使用しようとしましたが、$rootScopeと一緒に使用することはできません。$scopeを私のサービスに渡すことはできません。私は最良の解決策が何であるか分かりません。

アイデア？

AngularJS：1.6

出典

2017-05-05 Raymond Holguin

のようなものでなければなりませんか？なぜこれらの不気味なng-bind-htmlがありますか？ – estus

@estus私の 'label'属性のいくつかはHTMLを持っています。例は私の 'カウンター'がフォントのようなアイコンを利用するためにスパンタグにラップされるでしょう –

それから質問にこれを反映させてください。また、いくつかのテンプレートがありますが、それはどこから来ているのか分かりません。それは指令ですか？それはサービスとどのように結びついていますか？ – estus

基本的にディレクティブ/コンポーネントの代わりに、<a ...>...</a>する必要があります。

$watch自体には醜いものはありませんが、これを1つのコントローラで行うのは確かに醜いでしょう。

Order - {{counter}}のような文字列を計算するには、$compileが総過剰ですが、$interpolateサービスが救助になります。その唯一の目的は、角括弧を文字列に補間することです。 {{$インデックス}} ` -

それはおそらく` {{t.label}}やってに問題がある

app.directive('tab', function() { 
    return { 
    scope: { 
     tabData: '<', 
     counter: '<' 
    }, 
    template: '<a ...>...<span ng-bind-html="interpolatedLabel | trustHTML"></span></a>', 
    controller: function ($interpolate, $scope) { 
     $scope.$watchGroup(['tabData.label', 'counter'], function() { 
     $scope.interpolatedLabel = $interpolate($scope.tabData.label)({ 
      counter: $scope.counter 
     }); 
     } 
    } 
    } 
});

と

<li ng-repeat="t in tabService.getTabs()"...> 
    <tab tab-data="t" counter="$index"></tab> 
</li>

出典

2017-05-06 00:37:53 estus

これはうまくいくようです：http://stackoverflow.com/help/mcve –

それはあなたのために働いてうれしい。コード内の ''終了タグを修正しました。 'のような属性ディレクティブを作ることができます> 'を適切にレイアウトするのが適切ですが、適切な慣習的な方法は、要素ディレクティブ（基本的にコンポーネント）を作成し、それにスタイリングを提供することです（' display：inline'または 'display：inline-block'）。 – estus

AngularJS：スコープなしの文字列で角度コードをコンパイルする

答えて

関連する問題