2017-01-07 19 views
1

カスタムディレクティブを条件付きで追加するために推奨される角度方法は何ですか? Googleの投稿やSOの記事は本当に私の質問に答えていないようです。角1:ビューコントローラからDOMにディレクティブを追加する方法

このアプリでは、ユーザーが顧客情報を表示したり操作したりすることができます。 1つのビューでは、注文詳細をクリックすることができ、データを返すためのAPI呼び出しが行われます。注文が特定のタイプとして戻ってきた場合は、既にレンダリングされたサイドバーにインジケータを追加します。それはかなりシンプルで一般的な使用例のように思えるので、私は何が欠けているのだろうかと思っています。私は角1.4倍を使用してい

、 角度ブートストラップ

それは大きなアプリですが、ここに関連するコードの不自然な例です:

sidebar.html - APIの呼び出しの前に:

<div> 
<a href="#/customer">Customer Info</a> 
<a href="#/orders" id="ordertype"></a> 
<a href="#/notes">Notes</a> 
</div> 

sidebar.html - 私はAPI呼び出しの後に持っていたいもの:

<div> 
<a href="#/customer">Customer Info</a> 
<a href="#/orders" id="ordertype"> 
    <order-type-directive uib-tooltip="Phone Order" tooltip-trigger="mouseenter" tooltip-placement="top"/> 
</a> 
<a href="#/notes">Notes</a> 
</div> 

メインcontroller.js

angular.module('app.main') 
.controller('mainCtrl', function(){ 
var vm = this; 
vm.orderType; 
    ... 
    vm.getOrderData(memberID) 
    .then(function(data){ 
     vm.orderType = data.type; 
     //This is where my question arises 
    }) 
}) 

だから私は指示を行うことができます。

.directive('orderTypeDirective', function(){ 
    ... 
}) 

または私はこのような何かだけで行うことができます。

var el = angular.element('#orderType') 
.html('<span uib-tooltip="Phone Order" popover-trigger="mouseenter"></span>'); 
var aNewScope = $scope.$new(); 
$compile(el)(aNewScope) 

をしかし、私は上記のような感じています醜い、ハッキー。 については、どのように要素を作成した後にDOMに挿入すると、ドキュメントとすべてのグーグルは私が既にそれを行う方法を知っていると仮定します。

私はng-ifを使用しようとしましたが、API呼び出しが戻ってきて、vm.orderTypeを更新しても更新されません。

el.replaceWithEl(el); 

しかし、私はより良い、より多くの「角度」方法がなければならない知っていると私はこと:作成要素のオプションについては

は、私がmainCtrlに ifブロック内でこのような何かを行うことができます目立つものが見当たらない。

答えて

0

ng-if命令で試してみましたか?以下のような:

<div> 
<a href="#/customer">Customer Info</a> 
<a href="#/orders" id="ordertype"> 
    <order-type-directive uib-tooltip="Phone Order" 
         tooltip-trigger="mouseenter" 
         tooltip-placement="top" 
         data-ng-if="mainCtrl.orderType && mainCtrl.orderType.length>0"/> 
</a> 
<a href="#/notes">Notes</a> 
</div> 

それとも、多分うまくあなたのケースと一致するあなたのng-ifディレクティブ内の他の条件を置くことができます

関連する問題