Fatal编程技术网
  • javascript/
  • Javascript AngularJS：两个不同的URL使用相同的模板，我想在其他URL上更改视图的某些部分

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

javascript angularjs

Javascript AngularJS：两个不同的URL使用相同的模板，我想在其他URL上更改视图的某些部分,javascript,angularjs,ngroute,Javascript,Angularjs,Ngroute,例如，我有一个输入按钮： <input type="button" class="blue-button pull-right" value="{{gb.gebruikerToevoegenText}} toevoegen" ng-click="gebruikers.addGebruiker()"/> 但这会引导我找到两个视图的相同url，即/gebruikers 当URL为/gebruikers/:id？/:naam？时，我希望其值不同，下面是路由定义：

例如，我有一个输入按钮：

<input type="button" class="blue-button pull-right" value="{{gb.gebruikerToevoegenText}} toevoegen" ng-click="gebruikers.addGebruiker()"/>
但这会引导我找到两个视图的相同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操作视图时，我才不想更改模板，否则将需要大量复制和粘贴。

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>


var routerApp=angular.module（'routerApp'，['ui.router'，'ngRoute']）；
routerApp.config（['$routeProvider'，
函数（$routeProvider）{
$routeProvider。
当（“/gebruikers/：id？/：naam？”{
templateUrl:'gebruiker.html'，
控制器：“gebruikersController”
}).
当（“/gebruiker/：licensitehouderid/：id？”时{
templateUrl:'gebruiker.html'，
控制器：“gebruikerController”
}).
否则({
重定向到：“/gebruikers/：id？/：naam？”
});
}]);
routerApp.controller（'gebruikersController'，['$scope'，'$rootScope'，函数（$scope，$rootScope）{
$scope.toevoegen=“pratapss”；
}]);
routerApp.controller（'gebruikerController'，['$scope'，'$rootScope'，函数（$scope，$rootScope）{
$scope.toevoegen=“Pratap”；
}]);
gebruiker.html

<div>
<input type="button" class="blue-button pull-right" ng-value="toevoegen" ng-click="gebruikers.addGebruiker()"/>
</div>
无论如何，您都必须更改模板。请不要因此而污染根示波器；您可以使用ng if或ng show/hide（如前所述）。只需将isAuthorized（）函数添加到控制器中，并在url与特定模式匹配时设置一个标志。此外，我会将两个路径的controllerAs名称更改为相同的名称，以简化模板制作。

我在控制器中使用以下函数检查url，感谢您的帮助：

vm.gebruikerToevoegenText = $routeParams.id ? "Super User" : "Gebruiker";
您可以使用ng if或ng show指令在模板中显示所需内容，并传递一个以上参数以检查调用的链接请添加控制器和模板视图代码以了解更多详细信息我在我的控制器中添加了一个函数以检查当前url，但它将两个url都更改为/gebruikers。我已经编辑了post当我看到一切正常时，这无法工作，因为$location.path返回包含参数的路径。因此，它永远不会满足条件。 
vm.gebruikerToevoegenText = $routeParams.id ? "Super User" : "Gebruiker";