Problem with ng-if in ng-include html template from root controller-CodePudding

I come from Angular9 and am really used to it, and I have been asked to work a bit on an AngularJS project, which I have never experienced. So I am really struggling with the whole app structure. My issue is simple: I have a sub-navbar.html template directly injected in my root.html template using ng-include, and I would like to condition the display of one section of this sub-navbar with 'ng-if' (not just hide the section, I don't want it there at all). I have a backend call which sends me a boolean according to whether the connected user can see the section or not.

The problem I have is that my section is actually never active even when the boolean is 'true'.

Things I tried:

Change the priority of the ng-if and 'ng-controller' directives ---> Broke the app
Add a new 'subnavbar-controller' and declare it as a .state in the app.js ---> Didn't work
Create a custom directive ---> Can't figure out hw the work apparently, didn't work

I unfortunately can't copy all my code, but here are the main pieces I'm working on:

app.js: (I wrote nothing concerning this '$rootScope.adminSection' in the '.run()' function and also tried the same approach directly calling the service without the '$onInit')

    $urlRouterProvider.otherwise("/orders");
    $stateProvider
        .state('root', {
          abstract: true,
            url: '',
            views: {
                '': {
                    templateUrl: "view/root.html",
                    controller: ['$rootScope', 'AdministratorService', function ($rootScope, AdministratorService) {
                        const vm = this;
                        vm.$onInit = function() {
                            AdministratorService.getAdminSection().then(function (result) {
                                    $rootScope.adminSection = result;
                                }
                            )
                        };
                    }]
                }

}])

root.html:

<div ui-view="root_header"></div>
 <div class="row" style="min-height: 600px">
    <div class="col-md-2">
        <br/>
        <div ng-include="'view/subnavbar.html'"></div>
    </div>
        <div class="col-md-10">
        <div ui-view></div>
    </div>
</div>
    <div ng-include="'view/footer.html'"></div>

subnavbar.html:

<ul class="nav nav-pills nav-stacked" role="tablist">
        <li></li>
        <li ui-sref-active="active"><a ui-sref="root.contracts"></a><div class='arrow' aria-hidden='true'></div>
    </li>
    <li ng-if="$rootScope.adminSection" ui-sref-active="active"><a ui-sref="root.administrator">
    </a><div class='arrow' aria-hidden='true'></div></li>
    
        <li ui-sref-active="active"><a ui-sref="root.users"></a><div class='arrow' aria-hidden='true'>
    </div></li>
    </ul>

Any help welcome, thanks in advance !

CodePudding user response：

There are several ways this can work. The reason it is not working now is that $rootScope in the template is not defined. Try, in your template, to replace $rootScope.adminSection with just adminSection.

ngInclude directive creates a new scope which inherits from $rootScope. Therefore, variables in $rootScope should be directly accessible from the template.