如何手动重新加载指令？答案

【问题标题】：How can you manually reload a directive?如何手动重新加载指令？
【发布时间】：2015-08-13 21:39:30
【问题描述】：

我的身份验证工厂中有以下代码：

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 = '/' 时会这样，但这样做会弄乱我的测试。

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

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

【问题讨论】：

当您登录时，您会使用Session.setUser。你能显示这个用户与Auth.getCurrentUser()返回的用户的关系代码吗？您的 NavbarController 可能引用了不同的 'currentUser` 对象

标签： angularjs angular-directive

【解决方案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>

【讨论】：

那行不通，我也不指望它行得通。摘要循环如何更新vm.user的值？
嗯，我想我不确定“我的导航栏没有更新”到底是什么意思。究竟什么没有得到更新？
哦，对不起，我应该澄清一下 - vm.currentUser。我的视图中有数据绑定到它的属性。