Question

所以我是一个投入AngularJS项目的Java / Python开发人员。

我能够轻松掌握大部分概念，但一些语法/功能仍然无法实现。

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

if loggedIn
   show this
else
   show this

我知道我必须使用模板变量来为页面设置生成的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库的最新版本。

Answer 1

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

.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发生更改时，此控制器将作为摘要周期的一部分进行更新。当用户登录/退出时，您是否在父级中有代码来更改会话？

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

1 个答案: