I am attempting to achieve something similar to the following:
myindex.html
<div ng-controller="MyController" menu>
<input ng-model="myVar"/>
<div slimscroll="{'height':menuheight,'alwaysVisible':true}">
<div id="menucontent" menu-content>
</div>
</div>
</div>
Whenever there is text in the input field, it should trigger filtering on the menu-content directive. As it filters, the height of menu-content will change.
Menu Directive:
angular.directive('menu', function(){
return function (scope, element) {
var menuContentHeight = $("#menucontent").height();
scope.menuContentHeight = function(){
return $("#menucontent").height();
};
scope.$watch(scope.menuContentHeight, function(newValue, oldValue) {
if (newValue !== oldValue) {
console.log('Changed!');
menuContentHeight = newValue;
adjustHeight();
}
},true);
function adjustHeight(){
// Perform necessary height adjustment
}
};
});
Therefore, my goal is to utilize scope.watch to monitor any changes in height and immediately update them. While my code functions correctly, it unfortunately does not update instantly.
Is there a way for me to ensure that the height adjustment updates instantly whenever a change occurs?