Question

您好我正在学习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 = "#/";
      }
    }
  }
}

我把指令放在像这样的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>，但如果我刷新浏览器导航节目正确地<li>Logout</li>蚂蚁<li>Enter</li>正在隐藏。

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

我做错了什么？

（抱歉我的英语，我还在学习这门语言）

Answer 1

您的指令不会关注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函数。

角度1.5 app的导航栏

1 个答案: