主要是我想弄清楚如何更新警报。每个路由的currentPage。我把所有的东西都换成了指令,但仍然不知所措。任何指示都会有帮助的。
谢谢!
重写所有代码库index . html:
<!doctype html>
<html lang="en" ng-app="mydh" ng-controller="mainController">
<head>
<title>{{ pageTitle }}</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/stylesheets/app-dashboard.css">
<script src="assets/javascript/jquery-2.1.4.min.js"></script>
<script src="assets/javascript/bootstrap.min.js"></script>
<script src="assets/javascript/angular.min.js"></script>
<script src="assets/javascript/angular-route.js"></script>
<script src="assets/javascript/app/app.js"></script>
<script src="assets/javascript/app/app-template.js"></script>
<base href="/">
</head>
<body>
<page-navigation></page-navigation>
<page-alerts></page-alerts>
<div ng-view></div>
<page-footer></page-footer>
</body>
</html>
app.js:
(function() {
var app = angular.module('mydh', ['ngRoute', 'mydhTemplate']);
app.directive('pageAlerts', function() {
return {
restrict: 'E',
templateUrl: 'tmpl/alerts.html',
controller: function() {
this.currentPage = 'Dashboard';
},
controllerAs: 'alert'
};
});
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/mydash.html',
controller : 'dashController',
})
.when('/wizard', {
templateUrl : 'pages/wizard.html',
controller : 'wizardController',
})
.when('/reporting', {
templateUrl : 'pages/reporting.html',
controller : 'reportingController',
})
.when('/billing', {
templateUrl : 'pages/billing.html',
controller : 'billingController',
})
.when('/catalog', {
templateUrl : 'pages/catalog.html',
controller : 'catalogController',
});
$locationProvider.html5Mode(true);
});
app.controller('mainController', function($scope,$http) {
$scope.pageTitle = 'Demo Page';
});
})();
tmpl/alerts.html:
<div class="container">
<div class="row">
<div class="col-md-12">
<ol class="breadcrumb">
<li><i class="fa fa-home"></i> Home</li>
<li class="active">{{ alert.currentPage }}</li>
<li class="pull-right"><i class="fa fa-cog"></i></li>
</ol>
<div class="alert alert-danger alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong><i class="fa fa-exclamation-triangle"></i> Alert:</strong> Placeholder for alert information, if we ever need to display something crital! <a href="#" class="alert-link">Read more...</a>
</div>
<div class="alert alert-info alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong><i class="fa fa-info-circle"></i> Info:</strong> Placeholder for any information alerts we may want to display. <a href="#" class="alert-link">Read more...</a>
</div>
</div>
</div>
</div>
最终在routeProvider中添加了currentPage属性,然后抛出了这个坏家伙:
app.run(function($rootScope,$route) {
$rootScope.$on("$routeChangeSuccess", function(currentRoute, previousRoute) {
$rootScope.currentPage = $route.current.currentPage;
});
});