Ich arbeite zum ersten Mal mit angular und habe Probleme, einige dynamische Informationen in meiner index.html Datei zu zeigen. Alles innerhalb des ng-view-Tags funktioniert großartig.Wie setze ich Informationen in index.html außerhalb der NG-Ansicht?
Wenn sich ein Benutzer authentifiziert, wird eine globale Variable mit Benutzerinformationen in das $ rootScope und in einen Cookie eingefügt. Ich habe versucht, auf $ rootScope im Index zuzugreifen, indem ich etwas wie {{$ rootScope.globals.currentUser.username}} mache, aber es funktioniert nicht. Wie kann ich die protokollierten Benutzerinformationen in meinem Index.html anzeigen?
Ich habe versucht, einen Controller in meinem app.js zu erstellen und den ng-Controller auf den Körper zu setzen. Während dies funktioniert, wird es nicht aktualisiert, wenn der Benutzer sich abmeldet (für die Aktualisierung des App-Controllers ist eine Aktualisierung der Seite erforderlich). Dasselbe passiert nach der Benutzeranmeldung (es erfordert eine vollständige Aktualisierung der Seite, damit die Informationen angezeigt werden).
Code zum Setzen des Cookies und des Objekts in $ rootScope.
function SetCredentials(username, password, token) {
$rootScope.globals = {
currentUser: {
username: username,
token: token
}
};
$http.defaults.headers.common['Authorization'] = 'Bearer ' + token;
$cookies.put('globals', JSON.stringify($rootScope.globals));
}
Ich habe auch die folgende index.html Datei. Wie Sie sehen können, habe ich die {{$ rootScope.globals.currentUser.username}} aber nichts zeigt, nachdem der Benutzer in
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- css references -->
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- Main Header -->
<header class="main-header">
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
{{$rootScope.globals.currentUser.username}}
</div>
</nav>
</header>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<ng-view></ng-view>
</div>
<!-- /.content-wrapper -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="pull-right hidden-xs">
something here
</div>
<!-- Default to the left -->
<strong>Copyright © 2016 <a href="#">NPF</a>.</strong> All rights reserved.
</footer>
</div>
<!-- ./wrapper -->
<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.0 -->
<script src="Scripts/jquery-2.2.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/app.min.js"></script>
<script src="Scripts/linq.min.js"></script>
<script src="scripts/angular/angular.min.js"></script>
<script src="scripts/angular/angular-route.min.js"></script>
<script src="scripts/angular/angular-resource.min.js"></script>
<script src="scripts/angular/angular-cookies.min.js"></script>
<!-- application scripts -->
<!-- Main app -->
<script src="app/app.js"></script>
<!-- controllers -->
<script src="app/home/home.controller.js"></script>
<!-- services -->
<script src="app/services/authentication.service.js"></script>
<script src="app/services/user.service.js"></script>
</body>
</html>
Meine App-Datei protokolliert wird, wird wie folgt
(function() {
'use strict';
angular
.module('myApp', ['ngRoute', 'ngCookies', 'treeControl'])
.constant("appSettings",
{
serverPath: "http://localhost:64789/",
webApiPath: "http://localhost:64789/api/"
})
.config(config)
.run(run);
config.$inject = ['$routeProvider', '$locationProvider'];
function config($routeProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true,
});
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'app/home/home.html',
controllerAs: 'viewModel'
})
.when('/login', {
controller: 'LoginController',
templateUrl: 'app/login/login.html',
controllerAs: 'viewModel'
})
.when('/register', {
controller: 'RegisterController',
templateUrl: 'app/register/register.html',
controllerAs: 'viewModel'
})
.otherwise({ redirectTo: '/login' });
};
run.$inject = ['$rootScope', '$location', '$cookies', '$http'];
function run($rootScope, $location, $cookies, $http) {
// keep user logged in after page refresh
try {
$rootScope.globals = JSON.parse($cookies.get('globals'));
}
catch (err) {
$rootScope.globals = {};
}
if ($rootScope.globals && $rootScope.globals.currentUser) {
$http.defaults.headers.common['Authorization'] = 'Bearer ' + $rootScope.globals.currentUser.token;
}
//config.headers.Authorization = 'Bearer ' + authData.token;
$rootScope.$on('$locationChangeStart', function (event, next, current) {
// redirect to login page if not logged in and trying to access a restricted page
var restrictedPage = $.inArray($location.path(), ['/login', '/register', '/gds']) === -1;
try {
var loggedIn = $rootScope.globals.currentUser;
}
catch (err) {
}
if (restrictedPage && !loggedIn) {
$location.path('/login');
}
});
}})();
Sie müssen in Ihrem Markup nicht $ rootScope hinzufügen, da der Bereich Ihres Controllers die globalen Variablen erbt. Also sollte der Benutzer mit '{{globals.currentUser.username}}' arbeiten. – AWolf
Sie haben Recht ... es ist seltsam, weil ich das versucht habe und nicht funktioniert. Ich denke, ich muss es versucht haben, bevor Sie den appController hinzufügen. Wenn Sie eine Antwort hinzufügen, werde ich sie als Antwort markieren. – Wheels