Question

有条件地添加自定义指令的推荐Angular方法是什么？没有谷歌帖子或SO文章似乎真的回答了我的问题。

该应用程序允许用户显示客户信息并与之交互。在一个视图中，此人可以单击订单详细信息，这将进行API调用以返回数据。如果订单以某种类型返回，我想在已经呈现的侧边栏中添加一个指标。这似乎是一个非常简单和常见的用例，所以我想知道我错过了什么。

我正在使用Angular 1.4x，角度引导

这是一个很棒的应用程序，但这是一个相关代码的人为例子：

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时它不会更新。

对于create-element选项，我可以在mainCtrl的if块中执行类似的操作：

 el.replaceWithEl(el);

但我知道必须有一种更好，更“角度”的方式，而且我会遗漏一些明显的东西。

Answer 1

您是否尝试过使用Option Explicit指令？像：

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>指令中添加任何可能与您的情况相符的其他条件

Angular 1：如何从视图控制器向DOM添加指令

1 个答案: