Question

我目前正在Angular中使用自定义指令，通过观察父div上的调整大小来调整我的angular-nvd3图表的大小。这有效，但我必须重新绘制每个图表，即使是一张正在调整大小的图表。

是否可以覆盖派生自定义指令中的updateHeight和updateWidth函数来刷新每个单独的图表，因此我不必通过创建单独的指令来复制代码。

angular.module('app.graphs').directive('flexibleDiv', function () {
    return {
        scope: {
            opts: '=' 
        },
        link: function (scope, element, attr) {

            // Watching height of parent div
            scope.$watch(function () {
                return element.parent(0).height();
            }, updateHeight);

            // Watching width of parent div
            scope.$watch(function () {
                return element.parent(0).width();
            }, updateWidth);

            function updateHeight() {
                scope.$parent.scatter_api.refresh();
                scope.$parent.focus_api.refresh();
                scope.$parent.scatter_twoaxis_api.refresh();
            }

            function updateWidth() {
                scope.$parent.scatter_api.refresh();
                scope.$parent.focus_api.refresh();
                scope.$parent.scatter_twoaxis_api.refresh();
            }
        }
    }

 <div class="widget-body no-padding" flexible-div>
        <nvd3-scatter-chart data="scatter_data" api="scatter_api"></nvd3-scatter-chart>
         </div>
  </div>

Answer 1

该指令可以使用表达式绑定来定义要在事件上调用的父表达式：

angular.module('app.graphs').directive('flexibleDiv', function () {
    return {
        scope: {
            opts: '=',
            onUpdateSize: '&' 
        },
        link: function (scope, element, attr) {

            // Watching height of parent div
            scope.$watch(function () {
                return element.parent(0).height();
            }, updateSize);

            // Watching width of parent div
            scope.$watch(function () {
                return element.parent(0).width();
            }, updateSize);

            function updateSize() {
                scope.onUpdateSize();
            }

        }
    }

HTML

<div flexible-div on-update-size="scatter_api.refresh()">
    <nvd3-scatter-chart data="scatter_data" api="scatter_api">
    </nvd3-scatter-chart>
</div>

来自文档：

＆＃39;隔离＆＃39; scope object hash定义了一组从指令元素的属性派生的局部范围属性。这些本地属性对于模板的别名值很有用。对象哈希中的键映射到隔离范围上的属性名称;这些值通过匹配指令元素的属性来定义属性如何绑定到父作用域：


&或&attr - 提供了在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。

- AngularJS Comprehensive Directive API Reference -- Scope

AngularJs指令中的继承链接功能

1 个答案: