As I work on creating a user-friendly dashboard with widgets that can be sorted, docked, and floated, I encountered an issue. The controls I am using generate floating widgets as HTML at the bottom of the DOM, outside the controller scope where they were created. This setup makes it challenging to update the view when external components trigger actions that affect the data.
While developing this dashboard controller with the controllerAs syntax, I struggled to find a way to efficiently refresh the view. Numerous directives and external components on the page also influence the visuals, adding to the complexity.
I ideally aim for a seamless process without the need for manual view updates. Utilizing Angular's built-in commands to handle changes within the digest loop would have been ideal, but unfortunately, it was not viable in my situation.
If I were using $scope, updating the view would be straightforward with:
$scope.$digest
Or
$scope.$apply
However, the challenge lies in achieving the same outcome using the controller as:
var vm = this;
vm.array = [item, item];
vm.something = something;
//External component alters something on a vm.variable
vm.update! //How??