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

但是当仪表板被加载时，我得到了这个错误

而且用户名不显示..

有什么建议吗？

Answer 1

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

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