文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJs指令链接函数中的继承

问AngularJs指令链接函数中的继承
EN

Stack Overflow用户

提问于 2016-08-15 09:30:34

回答 1查看 292关注 0票数 0

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

是否可以在派生的自定义指令中覆盖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>

angularjs

angularjs-directive

angularjs-scope

nvd3.js

angular-nvd3

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-08-15 18:45:16

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

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>

来自“文件”：

“隔离”范围对象哈希定义了一组从指令元素的属性派生的本地范围属性。这些本地属性对于模板的值混叠非常有用。对象散列中的键映射到隔离作用域上属性的名称；这些值通过与指令元素上的属性匹配来定义属性如何绑定到父作用域：

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

--AngularJS综合指令API参考-范围

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38952584

复制

相似问题

问AngularJs指令链接函数中的继承
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs指令链接函数中的继承EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs指令链接函数中的继承
EN