javascript - 在AngularJS指令中创建条件模板项时遇到问题

因此，我是一名被投入AngularJS项目的Java / Python开发人员。

我能够轻松掌握大多数概念，但是某些语法/功能仍然使我难以理解。

我有这段处理登录/注销功能的代码。如果用户已登录，则应该显示X。我正在尝试更改它，以便提供的模板是有条件的。

if loggedIn
   show this
else
   show this

我知道我必须使用template变量来设置页面的生成HTML。我将如何创建它？

这是我要更改的代码。

.directive('login', ['loginService', function(loginService) {
    return {
        restrict: "E",
        replace: true,
        template: '<div ng-show="session.loggedIn" class="loginwidget">Logged In: {{ session.username }} <button ng-click="session.logOut()">Log Out</button> </div>',
        //scope: { user: '=' },
        link: function(scope,element,attrs) {
            scope.session = loginService.session();
        }
    };
}])
;

该项目在AngularJS v1.0.8中。自从稍后引入ng-if指令以来，我正计划在可能的时候对其进行升级，我认为这将解决一些问题。我还想确保该项目使用AngularJS库的最新版本。

最佳答案

我想你想要这样的东西...

.directive('login', ['loginService', function(loginService) {
    return {
        restrict: "E",
        replace: true,
        template:
            '<div> ' +
            '    <div ng-show="session.loggedIn" class="loginwidget"> ' +
            '        Logged In: {{ session.username }} <button ng-click="session.logOut()">Log Out</button> ' +
            '    </div>' +
            '    <div ng-show="!session.loggedIn" class="loginwidget"> ' +
            '        Logged Out <button ng-click="session.logIn()">Log In</button> ' +
            '    </div>' +
            '</div>',
        //scope: { user: '=' },
        link: function(scope,element,attrs) {
            scope.session = loginService.session();
        }
    };
}])
;

现在，我相信您缺少的另一部分是检查用户注销后scope.session的变化。

该特定指令将绑定到您的父控制器，并且当父控制器上的scope.session更改时，该控制器将作为摘要周期的一部分进行更新。用户登录/注销时，父母中是否有代码可以更改会话？