AngularJS - 绑定到指令调整大小 [英] AngularJS - bind to directive resize

问题描述

如何当一个指令调整通知我？
我曾尝试

 元素[0] = .onresize功能（）{
            的console.log（元素[0] .offsetWidth ++元素[0] .offsetHeight）;
        }
 

但它不是调用函数

 （函数（）{
使用严格的;//定义模块的指令。
//注入的依赖关系。
//指向指令定义功能。
。angular.module（应用）指令（nvLayout'，['$窗口'，'$编译，layoutDirective]）;功能layoutDirective（$窗口，$编译）{
    //使用方法：
    //
    //创建：
    //
    var命令= {
        链接：链接，
        限制：EA，
        范围： {
            layoutEntries：=，
            选择：＆放大器; onSelected
        }，
        模板：＆LT; D​​IV＆GT;＆LT; / DIV＆gt;中，
        控制器：控制器
    };
    返回指令;    功能链接（范围，元素，ATTRS）{
        变种elementCol = [];        变种onSelectedHandler = scope.selected（）;        element.on（调整大小功能（）{
            的console.log（调整大小）;
        }）;        $（窗口）。在（调整，scope.sizeNotifier）;        （范围。在$（$消灭，功能）{
            $（窗口）.off（调整，$ scope.sizeNotifier）;
        }）;        scope.sizeNotifier =功能（）{
            警报（窗口调整大小...）;
        };        scope.onselected =功能（ID）{
            onSelectedHandler（ID）;
        };        范围。$表（函数（）{
            返回scope.layoutEntries.length;
        }，
        功能（值）{
            //布局改变
            activateLayout（scope.layoutEntries）;
        }）;        功能activateLayout（layoutEntries）{
            对于（VAR I = 0; I＆LT; layoutEntries.length;我++）{                如果（elementCol [layoutEntries [I] .ID]）{
                    继续;
                }
                VAR的div =＆LT; NV单布局条目ID =槽+ layoutEntries [I] .ID +上选择='onselected'风格= \\的立场：绝对的;
                DIV = DIV +顶+ layoutEntries [I] .position.top +％;
                DIV = DIV +左+ layoutEntries [I] .position.left +％;
                DIV = DIV +的高度：+ layoutEntries [I] .size.height +％;
                DIV = DIV +宽：+ layoutEntries [I] .size.width +％;
                DIV = DIV +\\＆GT;＆LT; / NV单布局输入＆gt;中;                VAR EL = $编译（DIV）（范围）;
                element.append（EL）;
                elementCol [layoutEntries [I] .ID] = 1;
            }
        };
    }    功能控制器（$范围，$元件）{    }
}      }）（）;
 

解决方案

使用的 $范围看使用自定义监控功能：

 范围。$手表（
  功能（）{
    返回[元素[0] .offsetWidth，元素[0] .offsetHeight]。加入（'×'）;
  }，
  功能（值）{
    的console.log（'指令得到了调整：'，value.split（'X'））;
  }
）
 

How can i be notified when a directive is resized? i have tried

element[0].onresize = function() {
            console.log(element[0].offsetWidth + " " + element[0].offsetHeight);
        }

but its not calling the function

(function() {
'use strict';

// Define the directive on the module.
// Inject the dependencies. 
// Point to the directive definition function.
angular.module('app').directive('nvLayout', ['$window', '$compile', layoutDirective]);

function layoutDirective($window, $compile) {
    // Usage:
    // 
    // Creates:
    // 
    var directive = {
        link: link,
        restrict: 'EA',
        scope: {
            layoutEntries: "=",
            selected: "&onSelected"
        },
        template: "<div></div>",
        controller: controller
    };
    return directive;

    function link(scope, element, attrs) {
        var elementCol = [];

        var onSelectedHandler = scope.selected();

        element.on("resize", function () {
            console.log("resized.");
        });

        $(window).on("resize",scope.sizeNotifier);

        scope.$on("$destroy", function () {
            $(window).off("resize", $scope.sizeNotifier);
        });

        scope.sizeNotifier = function() {
            alert("windows is being resized...");
        };

        scope.onselected = function(id) {
            onSelectedHandler(id);
        };



        scope.$watch(function () {
            return scope.layoutEntries.length;
        },
        function (value) {
            //layout was changed
            activateLayout(scope.layoutEntries);
        });

        function activateLayout(layoutEntries) {


            for (var i = 0; i < layoutEntries.length; i++) {

                if (elementCol[layoutEntries[i].id]) {
                    continue;
                }
                var div = "<nv-single-layout-entry id=slot" + layoutEntries[i].id + " on-selected='onselected' style=\"position:absolute;";
                div = div + "top:" + layoutEntries[i].position.top + "%;";
                div = div + "left:" + layoutEntries[i].position.left + "%;";
                div = div + "height:" + layoutEntries[i].size.height + "%;";
                div = div + "width:" + layoutEntries[i].size.width + "%;";
                div = div + "\"></nv-single-layout-entry>";

                var el = $compile(div)(scope);
                element.append(el);
                elementCol[layoutEntries[i].id] = 1;
            }


        };
    }

    function controller($scope, $element) {

    }
}

      })();

解决方案

Use scope.$watch with a custom watch function:

scope.$watch(
  function () {
    return [element[0].offsetWidth, element[0].offsetHeight].join('x');
  },
  function (value) {
    console.log('directive got resized:', value.split('x'));
  }
)

这篇关于AngularJS - 绑定到指令调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！