Summary: When I adjust the size of a DOM element using CSS, its directive fails to acknowledge this change even with a watch on the size.
Aim
I have multiple custom directives (simple-graph) each containing an svg. My goal is to enlarge the one under the mouse cursor. Here's what I've tried:
1) Styling with CSS
simple-graph {height: 100px;}
simple-graph:hover {height: 200px;}
(The styling part is functioning correctly.)
2) HTML Markup
<simple-graph ng-repeat="data in datasets" sg-rst="data"></simple-graph>
3) Creating the Directive
angular.module('myApp').directive('simpleGraph', function () {
return {
restrict: 'E',
scope: {rst: '=sgRst'},
link: function (scope, el, attrs) {
//Add an svg element to el[0], perform initialization, etc. (details omitted)
//Also, $watch rst to update graph when data changes. (details omitted)
//Watch size of simple-graph
scope.$watch(function(){
return el[0].clientWidth + el[0].clientHeight;
}, updateSize);
function updateSize() {
//update size of svg element, utilizing el[0].clientHeight and .clientWidth (details omitted).
}
}
};
});
Issue / Inquiry
The resizing of the simple-graph due to the height adjustment in the CSS file does not trigger the scope.$watch in the directive. Question: Is there a way to manually force it to trigger??
Current Solution
- To the attributes of the simple-graph element in the HTML, I included
, which toggles the value of the attributesg-hover="hover" ng-mouseenter="hover=true" ng-mouseleave="hover=false"sg-hover, and - This change is then passed into the directive by updating its
scopeproperty to
, andscope: {rst: '=sgRst', hover: '=sgHover'} - I ensure this toggle is detected by adding a
.scope.$watch('hover', updateSize)
This approach works well and indicates that the updateSize function functions as intended. However, it feels unnecessarily complex, and I believe there must be a more efficient method. So, once again, my question: Can I manually trigger the $watch function when the element client size changes via CSS?
Thank you!