Question

我使用以下指令調用：

<div data-my-activity></div> 

這裏的指令：

app.directive('myActivity', function() { 
    return { 
     restrict: "A", 
     template: "<div class='activity-mask' data-ng-show='fetching.length > 0' >" + 
     "<ul>" + 
     "<li data-ng-repeat='activity in fetching'>{{ activity }}</li>" + 
     "</ul>" + 
     "</div>" + 
     "<div class='activity-mask' data-ng-show='loading.length > 0' >" + 
     "<ul>" + 
     "<li data-ng-repeat='activity in loading'>{{ activity }}</li>" + 
     "</ul>" + 
     "</div>" 
    }; 
}); 

當我使用這個指令它給了我：

<div data-my-activity=""> 
    <div class="activity-mask ng-hide" 
     data-ng-show="fetching.length &gt; 0"> 
     <ul><!-- ngRepeat: activity in fetching --></ul> 
    </div> 
    <div class="activity-mask ng-hide" 
     data-ng-show="loading.length &gt; 0"> 
     <ul><!-- ngRepeat: activity in loading --></ul> 
    </div> 
</div> 

有沒有一種方法可以讓我如果fetching.length和loading.length都等於0，請給我以下內容：

<div style="display:none"> 
    <div class="activity-mask ng-hide" 
     data-ng-show="fetching.length &gt; 0"> 
     <ul><!-- ngRepeat: activity in fetching --></ul> 
    </div> 
    <div class="activity-mask ng-hide" 
     data-ng-show="loading.length &gt; 0"> 
     <ul><!-- ngRepeat: activity in loading --></ul> 
    </div> 
</div> 

以及如果fetching.length或loading.length不等於0？

<div style="display:block">> 
    <div class="activity-mask ng-hide" 
     data-ng-show="fetching.length &gt; 0"> 
     <ul><!-- ngRepeat: activity in fetching --></ul> 
    </div> 
    <div class="activity-mask ng-hide" 
     data-ng-show="loading.length &gt; 0"> 
     <ul><!-- ngRepeat: activity in loading --></ul> 
    </div> 
</div> 

更新：

我想提出的答案，但它給我帶引號的問題，因爲我有三個層次上一行引號。

app.directive('myActivity', function() { 
    return { 
     restrict: "A", 
     replace: true, 
     template: "<div ng-style="{display: loading.length > 0 || fetching.length > 0 ? 'block' : 'none'}"> 
     "<ul>" + 
     "<li data-ng-repeat='activity in fetching'>{{ activity }}</li>" + 
     "</ul>" + 
     "</div>" + 
     "<div class='activity-mask' data-ng-show='loading.length > 0' >" + 
     "<ul>" + 
     "<li data-ng-repeat='activity in loading'>{{ activity }}</li>" + 
     "</ul>" + 
     "</div>" + 
     "</div>" 
    }; 
}); 

Answer 1

您應該能夠選擇

replace: true 

傳遞到指令，以及指定的模板將替換元素的HTML的一切，包括元素本身

app.directive('myActivity', function() { 
    return { 
    restrict: "A", 
    replace: true, 
    template: "..." 
    }; 
}); 

編輯：要動態顯示/隱藏內容，您應該能夠使用ngStyle設置display：none模板

template: '<div ng-style="{display: loading.length > 0 || fetching.length > 0 ? 'block' : 'none'}">....'; 

或者，你可以做一個ngIf你實際上並不需要在DOM元素

template: '<div ng-if="loading.length > 0 || fetching.length > 0">....'; 

編輯：我有ngShow，我實際上意味着ngIf