ng show-使用服务作为作用域参数

Question

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

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

首先我创建了一个服务：

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

我创建导航栏作为一个指令，所以我把它包含在主html文件中

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

在我的登录控制器中，我现在尝试执行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;
    };
});