AngularJS – 绑定到指令调整大小

当指令调整大小时，如何通知我？
我努力了

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'));
  }
)

原文地址：https://www.jb51.cc/angularjs/144157.html