Question

我是Angular的新手。我有一个显示导航的指令：

(function(){
    angular
        .module('instaguideApp')
        .directive('navigation', navigation);

        function navigation(authenticationData){
            return {
              restrict: 'EA',
              templateUrl: '/common/directives/navigation/navigation.template.html',
              scope: false,
              link: function(scope, elem, attr) {
                scope.data = {
                    isLoggedIn: authenticationData.isLoggedIn
                };
              }
            };

        }
})()

navigation.template.html是：

<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header"><a href="/" class="navbar-brand">InstaGuide</a>
            <button type="button" data-toggle="collapse" data-target="#navbar-main" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
        </div>
        <div id="navbar-main" class="navbar-collapse collapse">
            <ul ng-switch="{{data.isLoggedIn}}" class="nav navbar-nav">
                <li><a href="/#about">About</a></li>

                <li ng-switch-default>
                    <a href="/#login">Login</a>
                </li>

                <li ng-switch-when="true">>
                    <a href="/#logout">Logout</a>
                </li>

                <li>Debugging Value: {{data.isLoggedIn}}</li>
            </ul>
        </div>
    </div>
</div>

我有一个存储用户登录状态的服务：

(function(){    
angular
    .module('instaguideApp')
    .service('authenticationData', authenticationData);

function authenticationData(){

    var auth = {
        isLoggedIn: false
    };
    return auth;
}
})();

成功登录后，我设置了＃34; isLoggedIn＆＃34; authenticationData为true。当发生这种情况时，我想在导航中显示Logout而不是Login。你可以看到我正在使用ng-switch来实现这一目标。

当我登录时，模板会收到我已登录的内容，因为我可以看到＆＃34;调试值：false＆＃34;更改为＆＃34;调试值：true＆＃34;。

然而，登录和注册仍然出现在菜单中，就像ng-switch没有注册它的值已经改变一样。知道如何实现这个目标吗？

Answer 1

尝试删除ng-switch值中的括号：

<ul ng-switch="data.isLoggedIn" class="nav navbar-nav">

ng-switch期待角度表达式作为其值。所以不需要将值包装成双括号。

将值绑定到Angular模板中的ng-switch

1 个答案: