Angular App Not Working When Moving to Python Flask

Question

Not sure what information to give so will do as much as I can.

Currently have an Angular app sitting on IIS and using Classic ASP. All works fine. There is a dropdown which fetches some JSON that then populates a table.

Now, I have moved this over to Flask. When I select a dropdown and the table gets populated, I get an error saying:

TypeError: Cannot read properties of null (reading 'clientWidth')

The code is below

app.directive('widthSetter', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            $timeout(function () {
                var el = attr.widthSetter + '_top'
                element.css({ 'min-width': document.getElementById(el).clientWidth + 'px' }) // ERROR HAPPENS HERE
                scope.$apply();
            });
        }
    }
});

My knowledge with Angular is severely limited. However, I can't see what has happened from Classic ASP to Flask to have made this happen.

There are no JS/Python errors when the app loads initially. Just when this one specific action happens.

The code snippet above looks like it tries to set the width of table cols/headers. When I inspect the code, I can see the below

<th id="id_top" ng-repeat="heading in dimensionDataHeading" ng-bind="heading | underscores" ng-if="$index < dimensionDataHeading.length-3" class="ng-binding ng-scope">id</th>

Has anyone got any suggestions? The table gets populated but the widths aren't set properly, presuming due to the above.

If I add

console.log(attr.widthSetter);

I get a list such as:

• id
• start_date
• end_date
• etc

Then I get an error for each one that was successfully logged to the console. When I did a console.log in the Classic ASP application, I get the same first list but (obviously) instead of a second list of errors, I got a second list identical to the first

Thanks,

PS

Answer 1

Python flask uses Jinja templates that use {{}} which is what AngularJS also uses so doing {{ '{{ variable_name }}' }} in the relevant places solved my issues