AngularJS: 两个不同的 URL 使用相同的模板，我想在其他 URL 上更改视图的某些部分

Question

例如我有这个输入按钮：

<input type="button" class="blue-button pull-right" value="{{gb.gebruikerToevoegenText}} toevoegen" ng-click="gebruikers.addGebruiker()"/>

在控制器中我试图通过这个逻辑来实现：

vm.gebruikerToevoegenText = $location.path() == '/gebruikers' ? "Super User" : "Gebruiker";

但这引导我对两个视图使用相同的 url，即 /gebruikers

当URL为/gebruikers/:id?/:naam?'时，我希望它的值不同，下面是路由定义：

            $routeProvider.when('/gebruikers/:id?/:naam?', {
            templateUrl: 'gebruikers.html',
            controller: 'gebruikersController as gebruikers',
            resolve: {
                authentication: ['fwgAuthService', function (fwgAuthService) {
                    return fwgAuthService.login();
                }]
            }
        });

        $routeProvider.when('/gebruiker/:licentieHouderId/:id?', {
            templateUrl: 'gebruiker.html',
            controller: 'gebruikerController as vm',
            resolve: {
                authentication: ['fwgAuthService', function (fwgAuthService) {
                    return fwgAuthService.login();
                }]
            }
        });

我也想更改此 URL 上的用户权限，但前提是我知道如何根据 URL 操作视图，否则我不想更改模板这将是大量的复制和粘贴。

Answer 1

Index.html

<!doctype html>
<html ng-app="routerApp">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
    <script>

    var routerApp = angular.module('routerApp', ['ui.router', 'ngRoute']);

    routerApp.config(['$routeProvider',
                        function($routeProvider) {
                          $routeProvider.

                            when('/gebruikers/:id?/:naam?', {
                              templateUrl: 'gebruiker.html',
                              controller: 'gebruikersController'
                            }).
                            when('/gebruiker/:licentieHouderId/:id?', {
                              templateUrl: 'gebruiker.html',
                              controller: 'gebruikerController'
                            }).
                            otherwise({
                              redirectTo: '/gebruikers/:id?/:naam?'
                            });
                        }]);

    routerApp.controller('gebruikersController', ['$scope', '$rootScope', function($scope, $rootScope) {

        $scope.toevoegen = "Pratapsss";
    }]);

 routerApp.controller('gebruikerController', ['$scope', '$rootScope', function($scope, $rootScope) {

    $scope.toevoegen = "Pratap";
    }]); 


    </script>
  </head>
  <body>

  <div ng-view></div>

  </body>
</html>

gebruiker.html

<div>
<input type="button" class="blue-button pull-right" ng-value="toevoegen" ng-click="gebruikers.addGebruiker()"/>
</div>

Answer 2

无论如何您都必须更改模板。请不要为此污染 rootScope；您可以使用 ng-if 或 ng-show/hide（如前所述）。只需向您的控制器添加一个 isAuthorized() 函数，并在 url 匹配特定模式时设置一个标志。此外，我会将两个路径的 controllerAs 名称更改为相同的名称，以使模板化更容易。

Answer 3

我在控制器中使用以下功能检查了 url 感谢您的帮助：

vm.gebruikerToevoegenText = $routeParams.id ? "Super User" : "Gebruiker";

AngularJS: 两个不同的 URL 使用相同的模板，我想在其他 URL 上更改视图的某些部分

AngularJS: Same template is used by two different URL, I want to change some parts of view when on other URL

javascript

angularjs

ngroute