Angularjs 从具有隔离作用域的指令公开函数

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

像这样绑定到元素

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

但是当我补充

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

指令（'resize'，函数（$window）{ 返回{ 限制：“AE”， 是的， 范围：正确， 模板：“”， 链接：功能（范围、元素）{ var w=角度元素（$window）； scope.getWindowDimensions=函数（）{ 返回{'h'：w.height（）}； }; scope.$watch（scope.getWindowDimensions，函数（newValue，oldValue）{ var e=角度元素（元素）； scope.windowHeight=newValue.h； scope.elementOffset=e.offset（）.top console.log（scope.windowHeight、scope.elementOffset）； scope.style=函数（）{ 返回{ “高度”：（scope.windowHeight-scope.elementOffset）+“px”， “最大高度”：（scope.windowHeight-scope.elementOffset）+“px” } } }，对）； w、 绑定（'resize'，function（））{ 作用域：$apply（）； }); } }; })

---

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

---

从评论中的讨论中，或许可以补充一些澄清。通常，您的指令应该使用并响应范围，而不是修改范围。这就是控制器的作用。服务很适合封装您想要共享的功能。在指令中修改范围会导致跟踪谁在更改范围时出现问题。

在与

resize

指令关联的模板中使用

ngStyle

，并使用

scope:true

如果此div中有与指令无关的元素，它们会自动放置在模板元素中吗？否，您还必须在模板中添加

ngTransclude

，并在指令定义对象中添加

transclude:true

，在这种情况下。你能不能将“resize”作为一个元素（）并在它里面有？@Ir1sh似乎没什么问题。你能提供一把小提琴吗？一些建议：您可以直接使用模板

；为什么要使用一个函数（

ng style=“style（）”

）而不是一个简单的变量（

ng style=“style”

）？感谢您的反馈，但我必须将该方法添加到使用该指令的每个控制器中？我正在尝试修改dom/view，这不是指令的用途吗？因此，不应该将其全部封装起来吗？我真诚地请求，我确信我遗漏了一些东西，让您发布您的回复。因此，对于包含该方法的服务来说，这将是一个案例，您可以将该方法注入到每个控制器或指令中。通常，您的指令应该使用并响应范围，而不是修改范围。这就是控制器的作用。服务很适合封装您想要共享的功能。你当然可以做你在这里所做的，但是在我看来，在指令中修改范围会导致跟踪谁在更改范围的问题。

.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();
            });
        }
    };
})