如何手動重新加載指令？

我有下面的代碼在我驗證工廠：如何手動重新加載指令？

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

來源

2015-08-13 Adam Zerner

登錄時，你'Session.setUser'。你能否顯示這個用戶如何與'Auth.getCurrentUser（）'返回的用戶相關的代碼？可能你的'NavbarController'引用了一個不同的'currentUser'對象 – user2718281

OK，你進一步解釋說以後有什麼壞了，我注意到，問題是，在你的工廠你是不是正確返回像deferred.resolve遞延承諾。我應該解釋一下，我特別關注如何「手動重新加載指令」的問題，因爲您不必手動重新加載指令，這是一個反模式。指令應該照顧好自己。

我做了一個演示。經過適當的驗證工廠完成它的事情，與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="[email protected]" 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>

來源

2015-08-13 21:45:48 wesww

這是行不通的，我不希望它工作。摘要循環如何更新'vm.user'的值？ –

嗯，猜我不確定你的意思是什麼「我的導航欄不更新」。什麼不更新？ – wesww

對不起，我應該澄清 - vm.currentUser'。我認爲屬於數據綁定的屬性。 –

如何手動重新加載指令？

回答

相關問題