Question

我有以下指令，它找到窗口高度，它所绑定元素的偏移高度，然后将该元素的最大高度设置为windowheight - offsetheight。

绑定到像这样的元素

<div ng-style="style()" resize>
</div>

如此定义

.directive('resize', function ($window) {
    return {
        restrict: "AE",
        link: function (scope, element) {
            var w = angular.element($window);
            scope.getWindowDimensions = function() {
                return { 'h': w.height() };
            };

            scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
                var e = angular.element(element);

                scope.windowHeight = newValue.h;
                scope.elementOffset = e.offset().top
                console.log(scope.windowHeight, scope.elementOffset);

                scope.style = function() {
                    return {
                        'height': (scope.windowHeight - scope.elementOffset) + "px",
                        'max-height': (scope.windowHeight - scope.elementOffset) + "px"
                    }
                }
            }, true);
            w.bind('resize', function() {
                scope.$apply();
            });
        }
    };
})

但是当我添加

时

scope: {

}

它停止工作，因为我猜测style（）函数现在处于指令的隔离范围内。如何公开该样式函数以便ng-style可以访问它？

edit1：现在看起来像这样

.directive('resize', function ($window) {
    return {
        restrict: "AE",
            transclude: true,
        scope: true,
    template: '<div ng-style="style()"><div ng-transclude></div></div>',
        link: function (scope, element) {
            var w = angular.element($window);
            scope.getWindowDimensions = function() {
                return { 'h': w.height() };
            };

            scope.$watch(scope.getWindowDimensions, function(newValue, oldValue) {
                var e = angular.element(element);

                scope.windowHeight = newValue.h;
                scope.elementOffset = e.offset().top
                console.log(scope.windowHeight, scope.elementOffset);

                scope.style = function() {
                    return {
                        'height': (scope.windowHeight - scope.elementOffset) + "px",
                        'max-height': (scope.windowHeight - scope.elementOffset) + "px"
                    }
                }
            }, true);
            w.bind('resize', function() {
                scope.$apply();
            });
        }
    };
})

Answer 1

通常这是控制器或其他服务的用途。我宁愿将带有该方法的服务注入指令范围，或者让控制器拥有该方法，然后从范围中请求它。$ parent`如果需要的话。

根据评论中的讨论，也许可以添加一些澄清。通常，您的指令应使用并响应范围，而不是修改它。这就是控制器的用途。服务适用于封装您要共享的功能。在指令中修改范围会导致跟踪谁正在改变范围的问题。

从具有隔离范围的指令公开函数

1 个答案: