Angular Directives:如何控制何时呈现图表

时间:2014-12-11 00:36:09

标签: javascript html angularjs

我正在尝试设置管理页面。有许多元素,当您单击其中一个元素时,会出现一个下拉列表,其中包含更多信息,特别是高图表图表。目前我正在使用一个指令来创建图表div,但我无法找到一种方法来控制何时呈现指令,它会在页面加载时自动发生。

不幸的是,我有超过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对象中设置一个是否渲染图表的标志,但我不知道如何在该值发生变化时重新渲染它。在这种情况下,指令甚至是正确的用法吗?就像我说的那样,我仍然是网络开发人员的新手,所以我愿意完全不同地做这件事。谢谢!

1 个答案:

答案 0 :(得分:1)

除了使用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
    }
}