각도 1 :보기 컨트롤러에서 DOM에 지시문을 추가하는 방법

Question

사용자 지정 지시문을 조건부로 추가하기 위해 권장되는 각도 방법은 무엇입니까? Google 게시물 또는 SO 문서가 실제로 내 질문에 답하는 것 같지 않습니다.

앱을 사용하면 사용자가 고객 정보를 표시하고 상호 작용할 수 있습니다. 하나의보기에서 사용자는 주문 세부 정보를 클릭 할 수 있으며 데이터를 반환하는 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 블록 내부에 이런 일을 할 수 눈부신 것을 놓치고.

Answer 1

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 지침에 다른 조건을 넣을 수 있습니다