CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
ufk
ufk

Reputation: 32094

ng-show - using a service as a scope parameter

I'm writing an angular 1.5.0-rc0 application using bootstrap for a nav bar component.

I want to show the user an added items to his navigation bar if his user group id is 1.

first I created a service:

app.factory('UserService', function() {
    return {
        userGroupId : null
    };
});

I created the nav bar as a directive, so i included it in the main html file

<nav-bar></nav-bar>

and the nav-bar directive code:

(function () {

angular.module('myalcoholist').directive('navBar', function () {
    return {
        restrict: 'E',
        templateUrl: 'views/nav.html',
        controller: ['$scope','$auth', 'UserService',function ($scope,$auth,UserService) {
            $scope.user=UserService;
            $scope.isAuthenticated = function()
            {
                return $auth.isAuthenticated();
            };
        }]
    }
});
})();

as you can see I set $scope.user as the returned object from UserService.

in my login controller, after a successful login I set the userGroupId.

angular.module('myalcoholist').controller('LoginController',['$scope','$auth','$location', 'toastr','UserService',function ($scope,$auth,$location,toastr,UserService) {
    $scope.authenticate = function (provider) {
        $auth.authenticate(provider).then(function (data) {
            var accessToken = data.data.token;
            apiKey=accessToken;
            UserService.userGroupId=data.data.user_group_id;
...

now.. my nav-bar template file is as the following code:

          <li ng-show="user.userGroupId == 1">
                    <a href="admin-drinks">Admin Drinks</a>
                </li>

even after the authentication, when I uset userGroupId to 1 the element is still not shown.

any ideas?

update

I debugged and noticed that UserService.userGroupId is still null. so I changed the UserService to have the following code:

app.factory('UserService', function() {
    var user = {userGroupId:null};
    return {
        setUserGroupId: function (userGroupId) {
        user.userGroupId=setUserGroupId;
    },
        getUserGroupId: function () {
            return user.userGroupId;
        }
    };
});

in my LoginController I now try to execute setUserGroupId:

 angular.module('myalcoholist').controller('LoginController',['$scope','$auth','$location', 'toastr','UserService',function ($scope,$auth,$location,toastr,UserService) {
    $scope.authenticate = function (provider) {
        $auth.authenticate(provider).then(function (data) {
            var accessToken = data.data.token;
            apiKey=accessToken;
            UserService.setUserGroupId(data.data.user_group_id);
            ...

when I debug i see that userService is an object with two functions as I defined, but when the javascript chrome debugger tries to execute this line:

            UserService.setUserGroupId(data.data.user_group_id);

I get the following error:

ReferenceError: setUserGroupId is not defined
at Object.setUserGroupId (app.js:21)
at login-controller.js:12
at angular.js:15287
at m.$eval (angular.js:16554)
at m.$digest (angular.js:16372)
at m.$apply (angular.js:16662)
at g (angular.js:11033)
at t (angular.js:11231)
at XMLHttpRequest.v.onload (angular.js:11172)

Upvotes: 1

Views: 304

Answers (1)

Matt Way
Matt Way

Reputation: 33141

I have created a fiddle showcasing your requirement (as close as possible), and it seems to work fine.

http://jsfiddle.net/HB7LU/21493/

My guess is that you aren't actually setting the value when you think you are, and will likely require some debugging. Here is the code for brevity.

HTML

<div ng-controller="MyCtrl">
    <div ng-click="clicked()">
        Click ME, {{user.value}}!
    </div>
    <test-dir></test-dir>
</div>

JS

angular.module('myApp',[])
.service('TestService', function(){
    return {
        value: 2
    };
})
.directive('testDir', function(){
    return {
       restrict: 'E',
       template: '<div ng-show="user.value === 1">Here is some text</div><div>Some more always showing</div>',
       controller: function ($scope, TestService) {
           $scope.user = TestService;
       }
    };
})
.controller('MyCtrl', function($scope, TestService){
    $scope.user = TestService;

    $scope.clicked = function(){
        TestService.value = 1;
    };
});

Upvotes: 1

Related Questions