2016-05-18 13 views
0

こんにちは私はAngularを学んでいますが、すべての角度(1.5)のアプリケーションでグローバルナビゲーションバーを実行しようとしています。私はディレクティブ私は同様のindex.htmlで指示よりも置かれている角度1.5のナビゲーションバー

navigation.html

<nav class="navbar navbar-default" id="header"> 
     ... 
     non important tags 
     ... 
      <li ng-if="!session.logged"><a href="#/login">Enter</a></li> 
      <li ng-if="session.logged"><a ng-click="logout()">Logout</a></li> 

</nav> 

navigation.js

export default function navigation(Auth, Session) { 
    return { 
    restrict: "E", 
    replace: true, 
    scope: {}, 
    templateUrl: directivesPath + "navigation.html", 
    link: function(scope, element, attrs) { 
     scope.session = Session.sessionData(); 

     scope.logout = function() { 
     Auth.logout(); 
     scope.session = Session.sessionData(); 
     window.location = "#/"; 
     } 
    } 
    } 
} 

を作成したことのナビゲーションバーをやることが 、この

<!DOCTYPE html> 
    <html lang="es" ng-app="movieApp"> 
    <head> 
    ... 
    </head> 
    <body> 
    <navigation></navigation> 
    <div ui-view></div> 
    </body> 
    </html> 

そして、私はこれらの2つのコントローラを持っています

UsersCtrl.$inject = ["$scope", "$http", "Session"]; 

export function UsersCtrl($scope, $http, Session) { 
    $http.get('http://localhost:3000/users').success(function (data) { 
    console.log(data); 
    $scope.users = data.data; 
    $scope.session= Session.sessionData(); 
    }); 
} 

export default angular.module('movieControllers').controller("LoginCtrl", ["$scope", "$rootScope", "Auth", "Session", 
    function($scope, $rootScope, Auth, Session) { 
    console.log("User is logged? " + Auth.loggedIn()); 
    if (Auth.loggedIn() === true) { 
     window.location = "#/users/" + Auth.currentUser.username; 
    } 

    const button = document.getElementById('login'); 
    button.addEventListener("click", function() { 
     const username = document.login.username.value; 
     const password = document.login.password.value; 

     Auth.login({username: username, password: password}, function() { 
     $scope.session= Session.sessionData(); 
     window.location = "#/users/" + username; 
     // $scope.$digest(); 
     }); 
    }); 
}]); 

AuthSessionサービスだけで、バックエンドへの呼び出しを行う ユーザーデータを保持し、そのユーザデータを取り出します。

問題は、私がログインしたときに、アプリがユーザーのショーにリダイレクトするということですが、 NAVはまだ<li>Enter</li>を示したが、私は、ブラウザを更新した場合、NAVは<li>Enter</li>がhiddingある 正しく<li>Logout</li>アリを示しました。

コントローラのテンプレート内にナビゲーションディレクティブを置くと、 が正しく動作します。

私は間違っていますか?

答えて

0

あなたのディレクティブはsession変更を監視しません(私の英語のため申し訳ありませんが、私はまだあまりにも言語を学んでいます)。まだ、ディレクティブの仕事(https://docs.angularjs.org/guide/directive)にスコープを隔離し、$ウォッチをチェックする方法を見てより良い

function navigation(Auth, Session) { 
    return { 
    restrict: "E", 
    replace: true, 
    scope: {}, 
    templateUrl: directivesPath + "navigation.html", 
    link: function(scope, element, attrs) { 
     scope.$apply(function() { 
     scope.session = Session.sessionData(); 
     }); 

     scope.logout = function() { 
     Auth.logout(); 

     scope.$apply(function() { 
      scope.session = Session.sessionData(); 
     }); 
     window.location = "#/"; 
     } 
    } 
    } 
} 

:あなたのリンク機能であなたのsessionオブジェクトを割り当てる場合、あなたはそのような変化、について知らせるため$applyコールでそれを包むこと同様に機能する。

関連する問題