加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS – 绑定到指令调整大小

发布时间:2020-12-17 08:06:41 所属栏目:安全 来源:网络整理
导读:当指令调整大小时,如何通知我? 我努力了 element[0].onresize = function() { console.log(element[0].offsetWidth + " " + element[0].offsetHeight); } 但它不调用该函数 (function() {'use strict';// Define the directive on the module.// Inject th
当指令调整大小时,如何通知我?
我努力了
element[0].onresize = function() {
            console.log(element[0].offsetWidth + " " + element[0].offsetHeight);
        }

但它不调用该函数

(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) {

    }
}

      })();
使用 scope.$watch与自定义手表功能:
scope.$watch(
  function () {
    return [element[0].offsetWidth,element[0].offsetHeight].join('x');
  },function (value) {
    console.log('directive got resized:',value.split('x'));
  }
)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读