{{警报更新.currentPage}} in指令在angular-route中每修改一次路由

Update {{alert.currentPage}} in directive on each route change in angular-route

本文关键字：修改路由一次 angular-route 更新 currentPage in 指令更新时间：2023-09-26

主要是我想弄清楚如何更新警报。每个路由的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">&times;</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">&times;</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;
    });
});