Developing a dynamic user interface using an Angular framework and populating it with

Question

Developing a dynamic user interface using an Angular framework and populating it with

I am currently learning Angular (version 1) and facing an issue with my layout. I need to dynamically change the navigation based on the type of user that is logged in. To achieve this, I make an API request when the page loads to fetch the user object data, which will be shared with other controllers on the page.

Here is my DashboardController:

app.controller('DashboardController', function($scope, UserService, $rootScope){
        $scope.loading = true;

        if($scope.loading) {
            $scope.doInitialisation
        }

        $scope.isSuper = function() {
            if($scope.user.isSuper == 1) {
                return true;
            }

            return false;
        }

        UserService.authenticatedUser()
            .then(function(response){
                $scope.loading = false;
                $rootScope.user = response.message;
            }, function(error) {
                $scope.hasError = true;
                $scope.errors = error.message;
            });
    });

In my template, I'm attempting to display a UL element based on the user type:

<ul ng-if="isSuper()" ng-include="dashboard/nav/super.html" id="sidebar-menu" class="sf-js-enabled sf-arrows">

</ul><!-- #sidebar-menu -->

However, I encounter the following error:

Cannot read property 'isSuper' of undefined

I suspect this error occurs because isSuper() is fired before my AJAX request has completed loading. Is there a way to resolve this? Can I move the logic from the template to the AJAX success callback?

Any suggestions for a more efficient approach?

javascript angularjs ajax

Answer 1

Answer №1

The following code snippet illustrates how Angular updates the view asynchronously when data arrives, using data binding to display HTML elements with the ng-if directive. Check out this Plunker for an example of using the ng-include directive.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

DefaultController.$inject = ['$timeout'];

function DefaultController($timeout) {
  var vm = this;
  vm.user = {};

  $timeout(function() {
    vm.user.role = 'admin';
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as vm">
    <div ng-if="vm.user.role === 'admin'">
      <span>Hello, Admin</span>
    </div>
  </div>
</div>

Answer 2

The following code snippet illustrates how Angular updates the view asynchronously when data arrives, using data binding to display HTML elements with the ng-if directive. Check out this Plunker for an example of using the ng-include directive.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController);

DefaultController.$inject = ['$timeout'];

function DefaultController($timeout) {
  var vm = this;
  vm.user = {};

  $timeout(function() {
    vm.user.role = 'admin';
  }, 1000);
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as vm">
    <div ng-if="vm.user.role === 'admin'">
      <span>Hello, Admin</span>
    </div>
  </div>
</div>

Developing a dynamic user interface using an Angular framework and populating it with

Answer №1

Similar questions

Unit testing in AngularJS involves the process of attaching data from the $q.resolve() function to an object

Converting Background Images from html styling to Next.js

Exploring the possibilities of page manipulation using React Native WebView

Encountering issues with Office.context.document.getFileAsync function

Remove background image when input form field is in focus

Show a loading image after clicking on an image or button using JavaScript

NPM packages installed on a global level are not being detected

What is the best method for checking for JavaScript errors when using Selenium WebDriver in conjunction with NodeJS?

JavaScript date input formatting with HTML

When submitting data through jQuery.ajax that includes the string "???", the value is transformed into "jQuery19107363727174233645_1373301489648?"

send the variable to the deferred done function

Display/Conceal Dropdown Menu for Combobox Using only Javascript

Tips for sending Json data through a form to a controller and storing it in a database

Vue 3 Option api: Issue with v-model input not propagating from child component to parent element

Utilize node.js on your local machine and leverage gulp to monitor any modifications

Submit image and transfer it to server using AngularJS and Jersey

Getting the most out of the fastest-validator package: Implementing multiple patterns and custom messages

Is it possible to utilize EmberJS or other frameworks without the necessity of setting up its server?

Is there a way to eliminate spaces from a string using react-native?

What is the best way to pass a JSON object from R to Plumber in a format that JavaScript can interpret as an array instead of