更新

Question

我正在使用bootstrap为导航栏组件编写一个1.5.0-rc0角应用程序。

如果用户组ID为1，我想向用户显示添加到导航栏的项目。

首先我创建了一项服务：

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

我创建了导航栏作为指令，因此我将其包含在主html文件中

<nav-bar></nav-bar>

和nav-bar指令代码：

(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();
            };
        }]
    }
});
})();

如您所见，我将$scope.user设置为UserService的返回对象。

在我的登录控制器中，成功登录后我设置了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;
...

现在..我的导航栏模板文件如下代码：

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

即使在身份验证之后，当我将userGroupId用于1时，该元素仍未显示。

任何想法？

更新

我调试并注意到UserService.userGroupId仍然为null。所以我将UserService更改为具有以下代码：

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

在我的LoginController中，我现在尝试执行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);
            ...

当我调试时，我看到userService是一个具有我定义的两个函数的对象，但是当javascript chrome调试器试图执行这一行时：

            UserService.setUserGroupId(data.data.user_group_id);

我收到以下错误：

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)

Answer 1

我创造了一个展示你的要求的小提琴（尽可能接近），它似乎工作得很好。

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

我的猜测是，当您认为自己没有实际设置值时，可能需要进行一些调试。这是简洁的代码。

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;
    };
});

ng-show - 使用服务作为范围参数

更新

1 个答案: