Check out this fiddle
I have a problem where my directive communicates with the parent controller scope by setting the finalValue. However, when the window is resized, the scope.finalValue updates in the console but the UI does not reflect this change. I want to continuously update this value on window resizing. Initially, the directive successfully overrides the set value of 5 (which represents the height of the window) and passes it to the parent controller. But as I resize the window, even though I see the scope.finalValue changing in the console, the UI remains unchanged.
var app=angular.module('App', []);
app.controller("Ctrl1", function($scope){
$scope.finalValue = 5;
});
app.directive('elheightresize', ['$window', function($window) {
return {
restrict: "EA",
scope: false,
link: function(scope, elem, attrs) {
scope.onResize = function() {
scope.finalValue = $window.innerHeight;
console.log(scope.finalValue);
// var header = document.getElementsByTagName('header')[0];
// elem.windowHeight = $window.innerHeight - header.clientHeight;
// $(elem).height(elem.windowHeight);
}
scope.onResize();
angular.element($window).bind('resize', function() {
scope.onResize();
})
}
}
}])