一般的なレイアウトでは、名前やサムネイルなどのいくつかのユーザーの詳細を含むサイドバーがあります。だけでなく、いくつかの異なるものもあります。
サイドバーにディレクティブをロードし、その中に 2 つのテンプレート (ログイン時とログアウト時) を用意するというアイデアがありました。
ユーザーの詳細を表示する場合と表示しない場合があります。
ただし、2 つのいずれかで動作する sidebar というディレクティブがあります。
App.directive('sidebar', ['UserService', '$compile', function(User, $compile) {
var getTemplate = function() {
console.warn(User.isLogged);
var templateUrl = "#sidebar" + ((User.isLogged) ? '_loggedin' : '') + "_template";
console.log('requesting template: [%s]', templateUrl);
return $(templateUrl).html();
};
return {
restrict: 'A',
link: function link(scope, element, attrs) {
var tmpl = getTemplate();
element.html(tmpl);
element.replaceWith($compile(element.html())(scope));
},
template: getTemplate()
};
}]);
ユーザーの詳細をサービスにロードします
App.factory('UserService', [function userService() {
var User = {
isLogged: false,
username: ''
};
return User;
}]);
ログインフォームはこれUserService
を依存関係として受け入れ、それをに設定しisLogged
ますtrue
isLogged
しかし、が変更されたときに、ディレクティブにサイドバーを再描画させるにはどうすればよいですか?
私たちはこれを正しい方法で行っていますか?