在metronic模板中的AngularJS服务

Question

我创建了一项服务，可以执行注销并保存用户登录的用户名。

 angular.module('MetronicApp').service('userService', ['$http', function($http) {

    /**
     * Log out user session
     * @return {Object}         The status of the operation
     */
    this.logout = function() {
      return $http.post('/app/authenticate/logout');
    };

 }]);

然后我在指令的控制器中使用此服务

MetronicApp
  .directive('headerWidget', function() {
    return {
      restrict: 'E',
      scope: false,
      templateUrl: '../../widgets/header/widget.html',
      controller: ['$scope', '$filter', 'userService', function($scope, $filter, userService) {
        $scope.username = window.global.username;
        $scope.role = 'Owner';
        $scope.userThumbnailUrl = window.global.userThumbnailUrl;


        $scope.logout = function() {
          userService
            .logout()
            .success(function(data, status, headers, config) {
              // TODO: manage errors
              if (data.status === 'ok')
                window.open('/app', '_self');
            })
            .error(function(data, status, headers, config) {
              // TODO: manage errors
            });
        };
      }],
       link: function(scope, elem, attrs) {
            if (attrs.ngClick || attrs.href === '' || attrs.href === '#') {
                elem.on('click', function(e) {
                    e.preventDefault(); // prevent link click for above criteria
                });
            }
        }
    }
  });

但是当加载dashbord时，我收到此错误

并且不显示用户名..

有什么建议吗？

Answer 1

您需要将服务注入指令，然后才能将其传递给控制器​​。要做到这一点：

MetronicApp.directive('headerWidget', ['userService', function(userService){
...
}]);