將值綁定到Angular模板中的ng-switch

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;
}
})();   

成功登錄后，將authenticationData的“ isLoggedIn”設置為true。 發生這種情況時，我想在導航中顯示“注銷”而不是“登錄”。 您可以看到我正在使用ng-switch嘗試實現這一目標。

登錄時，模板會收到我已登錄的信息，因為我可以看到“調試值：false”更改為“調試值：true”。

但是，登錄和注冊仍然顯示在菜單中，就好像ng-switch尚未注冊，其值已更改。 任何想法如何實現這一目標？

Answer 1

嘗試刪除ng-switch值中的括號：

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

ng-switch期望角度表達式為其值。 因此，無需將值包裝在雙括號中。