我是相当新的角度,并希望能够绑定到一个元素的高度。在我目前的情况下,我想的CSS 底
在 EL1
到 EL2的高度绑定
。它们不共享一个共同的控制器。我怎样才能做到这一点?
< DIV ID ='EL1'NG控制器='控制器1'风格='底部:{{theHeightOfEl2}}'>< / DIV>< DIV ID ='EL2'NG控制器=控制器2风格=高度:573px;'>< / DIV>
我发现答案这里这看起来前途无量,但不可能看到如何扩展它,让我来指定哪些元素我想将其绑定到。
在一个通用的情况下,我想我所要求的是财产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]
:
< DIV结合与高度=['底部','#addressBookQuickLinks']>
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);
}
});
}
};
});
上一篇:采用NG-模糊和UI的SREF不能按预期工作模糊、工作、NG、SREF
下一篇:当REST API的应用服务器(如preSS)和Angulars JS应用程序的不同端口上运行CORS问题端口、应用程序、不同、服务器