Angular Directives：如何控制何時顯示圖表

我正在嘗試設置管理頁面。有許多元素，當你點擊其中一個元素時，下拉菜單會顯示更多信息，特別是高圖表圖。目前我正在使用一個指令來創建圖表div，但我一直無法找到控制指令何時呈現的方式，它會在頁面加載時自動發生。Angular Directives：如何控制何時顯示圖表

不幸的是，我有超過200個這樣的元素，並且在頁面當前設置的情況下，每次頁面加載時都會呈現所有200個圖表。顯然，這會導致糟糕的用戶體驗。

我對webdev總體上有點新。我不確定我是否以正確的方式處理這個問題。以下是相關代碼：

<div class="source" ng-repeat="source in sources"> 
    ... 
    <div source-dropdown-graph class="sources-dropdown-graph" ng-show="showDropdownGraph == source.myIndex" source="source"></div> 
</div>

我正在使用ng-show在用戶單擊時切換圖形的可見性。從指令：

return { 
    scope: { 
     source: "=source" 
    }, 
    templateUrl: 'source-dropdown-graph.html', 
    link: link 
};

鏈接功能只是呈現圖形。最後是模板的html：

<div id="chart-container" style="min-width: 70%; max-width: 1200px; height: 300px; margin: 0 auto"></div>

就像我說的，這是所有的工作，除了渲染一切權利的蝙蝠。我想在是否渲染圖表的source對象中設置一個標誌，但我不知道如何在該值發生變化時重新渲染它。在這種情況下，指令是否正確？就像我說的，我對web開發人員還比較陌生，所以我願意完全不同。謝謝！

來源

2014-12-11 Trevor

最簡單的改變是將'ng-show'換成'ng-if'。 – 2014-12-11 00:39:33

除了使用ng-if而不是ng-show來限制DOM中元素的數量外，您還可以在指令中使用手錶來監視source的變化並控制何時或不需要渲染。

return { 
    scope: { 
     source: "=" 
    }, 
    templateUrl: 'source-dropdown-graph.html', 
    link: link 
}; 

function link (scope, element, attrs) { 
    scope.$watch('source', function (newValue, oldValue) { 
     // condition(s) where you don't want to render 
     // i.e. if the source is undefined or null 
     if (!newValue || (newValue === oldValue)) { 
      return; 
     } 

     // otherwise, render it every time source changes 
     render(); 
    }); 

    function render() { 
     // your rendering logic 
    } 
}

來源

2014-12-11 02:13:06 user2943490

Angular Directives：如何控制何時顯示圖表

回答

相關問題