0

一般的なレイアウトでは、名前やサムネイルなどのいくつかのユーザーの詳細を含むサイドバーがあります。だけでなく、いくつかの異なるものもあります。

サイドバーにディレクティブをロードし、その中に 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しかし、が変更されたときに、ディレクティブにサイドバーを再描画させるにはどうすればよいですか?

私たちはこれを正しい方法で行っていますか?

4

1 に答える 1