角指令绑定到元素的高度 [英] Angular directive bind to height of element

问题描述

我是相当新的角度，并希望能够绑定到一个元素的高度。在我目前的情况下，我想的CSS 底在 EL1 到 EL2的高度绑定。它们不共享一个共同的控制器。我怎样才能做到这一点？

 ＆LT; D​​IV ID ='EL1'NG控制器='控制器1'风格='底部：{{theHeightOfEl2}}'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV ID ='EL2'NG控制器=控制器2风格=高度：573px;'＆GT;＆LT; / DIV＆GT;
 

我发现答案这里这看起来前途无量，但不可能看到如何扩展它，让我来指定哪些元素我想将其绑定到。

在一个通用的情况下，我想我所要求的是财产X月1元素绑定属性Y于元2指令。

更新

我创建了一个指令，要做到这一点，但它不太工作呢。它正确地触发在一开始，但当我尝试通过手动更新的CSS来测试它的 EL2 手表犯规火

  m.directive（'bindToHeight'，函数（$窗口）{
    返回{
        限制：'A'，
        链接：功能（范围，ELEM，ATTRS）{
            VAR属性= $范围的eval（ATTRS ['bindToHeight']）;
            变种targetElem = angular.element（document.querySelector（属性[1]））;            //监视更改
            范围。$表（函数（）{
                返回targetElem.height（）;
            }，
            功能（为newValue，属性oldValue）{
                如果（为newValue！=属性oldValue）{
                    // 做一点事 ...
                    的console.log（'设置底部+为newValue）;
                    elem.attr（'底'，为newValue）;
                }
            }）;
        }
    };
}）;
 

解决方案

要任何人寻找答案，这里是我用什么

用法绑定到高度=[cssProperty，sourceElement]：

 ＆LT; D​​IV结合与高度=['底部'，'＃addressBookQuickLinks']＆GT;
 

code：

  m.directive（'bindToHeight'，函数（$窗口）{    返回{
        限制：'A'，        链接：功能（范围，ELEM，ATTRS）{
            VAR属性= $范围的eval（ATTRS ['bindToHeight']）;
            变种targetElem = angular.element（document.querySelector（属性[1]））;            //监视更改
            范围。$表（函数（）{
                返回targetElem.height（）;
            }，
            功能（为newValue，属性oldValue）{
                如果（为newValue！=属性oldValue）{
                    elem.css（属性[0]，为newValue）;
                }
            }）;
        }
    };
}）;
 

I am fairly new to Angular and want to be able to bind to the height of an element. In my current case I want to bind the CSS bottom on el1 to the height of el2. They do not share a common controller. How can I do this?

<div id='el1' ng-controller='controller1' style='bottom: {{theHeightOfEl2}}'></div>
<div id='el2' ng-controller='controller2' style='height: 573px;'></div>

I found an answer on here which looked promising but couldnt see how to extend it to allow me to specify which element I wanted to bind it to.

In a generic case, I guess what I am asking for is a directive to bind property X on Element 1 to property Y on Element 2.

Update

I have created a directive to do this but it isn't quite working yet. It fires correctly at the start but when I try to test it by manually updating the CSS of the el2 the watch doesnt fire

m.directive('bindToHeight', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));

            // Watch for changes
            scope.$watch(function () {
                return targetElem.height();
            },
            function (newValue, oldValue) {
                if (newValue != oldValue) {
                    // Do something ...
                    console.log('Setting bottom to ' + newValue);
                    elem.attr('bottom', newValue);
                }
            });
        }
    };
});

解决方案

To anyone looking for the answer, here is what I used

Usage bind-to-height="[cssProperty, sourceElement]":

<div bind-to-height="['bottom','#addressBookQuickLinks']">

Code:

m.directive('bindToHeight', function ($window) {

    return {
        restrict: 'A',

        link: function (scope, elem, attrs) {
            var attributes = scope.$eval(attrs['bindToHeight']);
            var targetElem = angular.element(document.querySelector(attributes[1]));

            // Watch for changes
            scope.$watch(function () {
                return targetElem.height();
            },
            function (newValue, oldValue) {
                if (newValue != oldValue) {
                    elem.css(attributes[0], newValue);
                }
            });
        }
    };
});

这篇关于角指令绑定到元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！