angular 1.5应用程序中的导航栏

Navigation bar in angular 1.5 app

本文关键字：导航 应用程序 angular      更新时间：2023-09-26

你好，我正在学习Angular，我正在尝试在所有Angular（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 = "#/";
      }
    }
  }
}

我把than指令放在一个像这样的index.html中

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

我有控制器，例如这两个

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

Auth和Session服务只是对后端进行调用，保留用户数据并检索该用户数据。

问题是，当我登录时，应用程序重定向到用户的节目，但导航仍显示<li>Enter</li>，但如果我刷新浏览器，导航显示CCD_ 4和CCD_。

如果我将导航指令放入控制器的模板中行为正确。

我做错了什么？

（对不起我的英语，我还在学英语）

您的指令不监视session的更改。当您在链接函数中分配session对象时，您可以将其封装在$apply调用中，以通知更改，例如：

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 = "#/";
      }
    }
  }
}

更好的是，看看指令中的隔离作用域是如何工作的(https://docs.angularjs.org/guide/directive)并检查$watch功能。

相关文章：