我使用element-resize指令创建了一个非常好的子指令,用于计算元素的实际大小:
angular.module('myApp')
.directive('subNode', function () {
'use strict';
return {
restrict: 'E',
replace: true,
scope: {
displayName: '@',
nodeWidth: '@'
},
controller: ['$scope', '$element', function($scope, $element) {
}],
template: '<div element-resize>{{displayName}}-{{elementWidth}}</div>'
};
});
如果我运行这个,我可以看到&#39; elementWidth&#39;是非常好的,但我不明白我的父指令现在正在读取正在创建的子范围数据?如果有人可以给出一个简单的例子,他们应该如何共享数据,这将是一个很大的帮助。
这是我的父指令,它应该计算所有子指令创建的宽度:不要理解如何。
angular.module('myApp')
.directive('nodeCollection', function () {
'use strict';
return {
restrict: 'E',
replace: true,
scope: {
nodes: '=',
},
controller: ['$scope', '$element', '$attrs', '$rootScope', function(scope, $element, $attrs, $rootScope) {
}],
template: '<div element-resize><ul><li ng-repeat="node in nodes"><sub-node display-name="{{node.name}}"></sub-node></li></ul></div>'
};
}
);
element-resize指令:
angular.module('myApp')
.directive('elementResize', function () {
'use strict';
return {
restrict: 'A',
controller: ['$scope', '$element', function($scope, $element) {
$scope.getElementDimensions = function () {
return { 'h': $element.height(), 'w': $element.width() };
};
$scope.$watch($scope.getElementDimensions, function (newValue, oldValue) {
$scope.elementHeight = newValue.h;
$scope.elementWidth = newValue.w;
}, true);
}]
};
}
);