Angularjs ng-if with ajax request

Question

I'm new to angularjs and trying to figure out how to show/hide navbar elements depending on permissions. I'm currently getting the permissions via an ajax request:

mycloudControllers.controller('HeaderController', ['$scope', '$http',
    function($scope, $http) {
        $http.get('/api/header').then(function(data) {
            $scope = data.data;
            console.log($scope);
        });
    }
]);

HTML:

<div ng-if="viewFiles || updateFiles" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">

JSON Response (console.log):

{viewAccounts: true, viewAccountTypes: true, viewFiles: true, updateFiles: true}

The console logs the correct permissions (set to true) but I can't figure out how to get the compiler to wait until the request finishes to execute the ng-if. I want to use ng-if so the DOM elements are completely removed as opposed to just hidden.

I may be going about this the wrong way, so any light that can be shed would be greatly appreciated.

You are overwriting the entire scope. Try defining a property on it: $scope.permissions = data.data — marko
– marko, Commented Jan 1, 2016 at 19:51
@marko add yours as an answer and I'll mark it. That was it! Thank you! — Josh Davis
– Josh Davis, Commented Jan 1, 2016 at 19:53

marko · Accepted Answer · 2016-01-01 19:54:43Z

2

You are overwriting the entire scope. Try defining a property on it:

$scope.permissions = data.data

answered Jan 1, 2016 at 19:54

marko

2,8211 gold badge33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs ng-if with ajax request

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related