本文介绍了AngularJS - 绑定到指令调整大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

但它不是调用函数

 (函数(){
使用严格的;//定义模块的指令。
//注入的依赖关系。
//指向指令定义功能。
。angular.module(应用)指令(nvLayout',['$窗口','$编译,layoutDirective]);功能layoutDirective($窗口,$编译){
    //使用方法:
    //
    //创建:
    //
    var命令= {
        链接:链接,
        限制:EA,
        范围: {
            layoutEntries:=,
            选择:&放大器; onSelected
        },
        模板:< D​​IV>< / DIV>中,
        控制器:控制器
    };
    返回指令;    功能链接(范围,元素,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< layoutEntries.length;我++){                如果(elementCol [layoutEntries [I] .ID]){
                    继续;
                }
                VAR的div =< 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 +\\>< / NV单布局输入>中;                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 - 绑定到指令调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-11 19:47