Question

我已经创建了一个名为admin的指令，我只想显示基本URL是否包含字符串admin，然后根据URL路径，指令的视图将显示不同的内容。

因此，如果用户导航到 admin.example.com ，他们将看到该指令的视图，如果他们转到 example.com ，他们将看不到它。

我已经在某种程度上工作了，它在我第一次加载angularJS应用程序时起作用，但是当我点击应用程序的不同页面并加载不同的视图和路径时，它不起作用。

这是我的基本应用程序：

/* Define the `app` module */
var app = angular.module('app', ['ngRoute', 'ngTouch', 'ngAnimate', 'ui.bootstrap', 'ngSanitize']);  // TODO: 'ngAnimate', 'ui.bootstrap' 

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){

    $routeProvider
        .when('/', {
            class: 'home-page',
            title: 'Home',
            templateUrl: '/app/static/home.html',
            controller: 'mainController as mainCtrl'

        })
        .when('/about', {
            class: 'about-page',
            title: 'About',
            templateUrl: '/app/static/about.html',
            controller: 'mainController as mainCtrl'
        })
        .when('/news/id-:newsId', {
            class: 'news-page',
            title: 'News',
            templateUrl: 'app/components/news/details/newsDetailsView.html',
            controller: 'newsDetailsController as newsDCtrl'
        })
        .otherwise({
            class: 'page-not-found',
            title: '404 Page Not Found',
            templateUrl: '/app/static/404.html',
            controller: 'mainController as mainCtrl'
        });

    // use the HTML5 History API
    $locationProvider.html5Mode(true);
}]);

app.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.class = current.$$route.class;
        $rootScope.title = current.$$route.title;
        $rootScope.description = current.$$route.description;
    });
}]);

app.controller('adminController', ['$location', function ($location) {
    var adminCtrl = this;
    adminCtrl.isAdmin = $location.host().includes('admin.example') ? true : false;
    adminCtrl.urlPath = $location.url();
}])

app.directive('admin', [function(){
    return {
        restrict: 'E',
        templateUrl: 'app/components/admin-links/adminView.html',
        transclude: true,
        replace: true,
        controller: 'adminController as adminCtrl'
    };
}]);

问题是adminCtrl.urlPath = $location.url();仅在我刷新页面时更新，而不是在我点击应用程序中的不同路线并更改页面而不刷新页面时。

当用户浏览不同的视图/路线而不刷新页面时，如何更新此值？

Answer 1

您需要使用$location.path()

这将为您提供路线路径。

更改

adminCtrl.urlPath = $location.url();

到

adminCtrl.urlPath = $location.path();

AngularJS $ location.url（）仅适用于页面刷新

1 个答案: