Hello everyone,
I am facing a challenge in passing the current DOM element to an Angular directive called "ng-disabled." While I understand that manipulating the DOM directly in Angular is not recommended, I am struggling to find a simpler solution for my issue. Here's what I'm dealing with:
There is a button in my application that updates a scope variable when clicked:
<button ng-click="target_model.display_detail=true">click me</button>
Elsewhere in the template, there is code that monitors the "target_model.display_detail" variable. When it becomes true, a modal dialog is displayed. This dialog contains an Angular directive fetching data from the server and populating a form which includes another similar button.
The data structure I am working with can be recursive, with multiple nested "target_models." Therefore, it is possible for a button within a modal dialog to reference a target_model whose form has already been created. In such cases, I simply want to disable the button. Ideally, I would like to achieve something like this:
<button ng-disabled="ancestor_model_exists(the_current_element, target_model.some_unique_id)">click me</button>
Here, "ancestor_model_exists" is a function designed to check the DOM for an ancestor element with a specific id. However, the challenge lies in determining which element to start from.