本文介绍了AngularJS - 绑定到指令调整大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何当一个指令调整通知我?
我曾尝试
元素[0] = .onresize功能(){
的console.log(元素[0] .offsetWidth ++元素[0] .offsetHeight);
}
但它不是调用函数
(函数(){
使用严格的;//定义模块的指令。
//注入的依赖关系。
//指向指令定义功能。
。angular.module(应用)指令(nvLayout',['$窗口','$编译,layoutDirective]);功能layoutDirective($窗口,$编译){
//使用方法:
//
//创建:
//
var命令= {
链接:链接,
限制:EA,
范围: {
layoutEntries:=,
选择:&放大器; onSelected
},
模板:< DIV>< / DIV>中,
控制器:控制器
};
返回指令; 功能链接(范围,元素,ATTRS){
变种elementCol = []; 变种onSelectedHandler = scope.selected(); element.on(调整大小功能(){
的console.log(调整大小);
}); $(窗口)。在(调整,scope.sizeNotifier); (范围。在$($消灭,功能){
$(窗口).off(调整,$ scope.sizeNotifier);
}); scope.sizeNotifier =功能(){
警报(窗口调整大小...);
}; scope.onselected =功能(ID){
onSelectedHandler(ID);
}; 范围。$表(函数(){
返回scope.layoutEntries.length;
},
功能(值){
//布局改变
activateLayout(scope.layoutEntries);
}); 功能activateLayout(layoutEntries){
对于(VAR I = 0; I< layoutEntries.length;我++){ 如果(elementCol [layoutEntries [I] .ID]){
继续;
}
VAR的div =< NV单布局条目ID =槽+ layoutEntries [I] .ID +上选择='onselected'风格= \\的立场:绝对的;
DIV = DIV +顶+ layoutEntries [I] .position.top +%;
DIV = DIV +左+ layoutEntries [I] .position.left +%;
DIV = DIV +的高度:+ layoutEntries [I] .size.height +%;
DIV = DIV +宽:+ layoutEntries [I] .size.width +%;
DIV = DIV +\\>< / NV单布局输入>中; VAR EL = $编译(DIV)(范围);
element.append(EL);
elementCol [layoutEntries [I] .ID] = 1;
}
};
} 功能控制器($范围,$元件){ }
} })();
解决方案
使用的使用自定义监控功能:
范围。$手表(
功能(){
返回[元素[0] .offsetWidth,元素[0] .offsetHeight]。加入('×');
},
功能(值){
的console.log('指令得到了调整:',value.split('X'));
}
)
How can i be notified when a directive is resized?i have tried
element[0].onresize = function() {
console.log(element[0].offsetWidth + " " + element[0].offsetHeight);
}
but its not calling the function
(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) {
}
}
})();
解决方案
Use scope.$watch with a custom watch function:
scope.$watch(
function () {
return [element[0].offsetWidth, element[0].offsetHeight].join('x');
},
function (value) {
console.log('directive got resized:', value.split('x'));
}
)
这篇关于AngularJS - 绑定到指令调整大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!