Question

我的Auth工厂中有以下代码：

login: function(user) {
  return $http
    .post('/login', user)
    .then(function(response) {
      Session.setUser(response.data);
      $cookies.put('userId', response.data._id);
      $state.go('home', { reload: true });
      // $window.location.href = '/';
    })
  ;
},

问题是我的导航栏没有更新（我在视图中有属性绑定到vm.currentUser;见下文）。当我使用$window.location.href = '/'时会这样做，但这样做会让我的测试变得混乱。

我认为解决方案是手动重新加载navbar指令。我怎样才能做到这一点？这是该指令目前的样子：

angular
  .module('mean-starter')
  .directive('navbar', navbar)
;

function navbar() {
  return {
    restrict: 'E',
    templateUrl: '/components/navbar/navbar.directive.html',
    controller: NavbarController,
    controllerAs: 'vm'
  };
}

function NavbarController(Auth) {
  var vm = this;
  Auth
    .getCurrentUser()
    .then(function(currentUser) {
      vm.currentUser = currentUser;
    })
  ;
  vm.logout = function() {
    Auth.logout();
  };
}

Answer 1

好的，在你进一步解释了什么是坏的之后我注意到问题是你的工厂没有正确地返回像deferred.resolve这样的延迟承诺。我应该解释一下，我特别关注如何“手动重新加载指令”的问题，因为你不必手动重新加载指令，这是一个反模式。指令应该照顾好自己。

我做了一个演示。在正确的Auth工厂完成后，deferred.resolve指令会自动更新所有内容，因为绑定模型已更改。看看它，它解决了你的问题：

http://plnkr.co/edit/u1FakV?p=preview

var app = angular.module('plunker', []);

app.factory('Auth', ['$timeout', '$q',
  function($timeout, $q) {
    function getCurrentUserFake() {
      var deferred = $q.defer();
      setTimeout(function() {
        deferred.resolve('Joe Smith');
      }, 1000);
      return deferred.promise;
    }

    function getCurrentUser() {
      var deferred = $q.defer();
      $http.get('/login')
        .success(function(data) {
          deferred.resolve(data)
        })
        .error(function(data) {
          deferred.reject(data);
        });
      return deferred.promise;
    }
    return {
      getCurrentUser: getCurrentUser,
      getCurrentUserFake: getCurrentUserFake
    };
  }
]);

app.directive('navbar', navbar);

function navbar() {
  return {
    restrict: 'E',
    template: '<div>{{vm.currentUser}}</div>',
    controller: NavbarController,
    controllerAs: 'vm'
  };
}

function NavbarController(Auth) {
  var vm = this;
  vm.currentUser = 'logging in...';
  Auth
    .getCurrentUserFake()
    .then(function(currentUser) {
      console.log(currentUser);
      vm.currentUser = currentUser;
    });
  vm.logout = function() {
    Auth.logout();
  };
}

html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <navbar></navbar>
  </body>

</html>

如何手动重新加载指令？

1 个答案: