从元素指令中的路由提供程序获取参数

Get parameters from routeProvider in element directive

本文关键字：程序 获取 参数 路由 元素 指令      更新时间：2023-09-26

我有一个元素指令，我想知道我是否可以从routeProvider获取参数来呈现我的模板并在我的控制器中设置它。

adminDash.directive('hospitals', function() {
    return {
        restrict: 'E',
        templateUrl: 'www/partials/admin/hospitals.html',
        controller: 'AdminHospitalsController',
        controllerAs: 'hospitalsCtrl',
    };
});

如何在元素指令中获取任何参数？

您可以隔离指令的作用域，如下所示：

adminDash.directive('hospitals', function() {
    return {
        restrict: 'E',
        templateUrl: 'www/partials/admin/hospitals.html',
        controller: 'AdminHospitalsController',
        controllerAs: 'hospitalsCtrl',
        scope: {
            paramValue: '&',
            paramVariable: '=',
        },
    };
});

检查此内容以更好地了解 https://thinkster.io/egghead/isolate-scope-am/

有两种

方法可以做到这一点：两者都涉及使用允许您检索当前路由参数集$routeParams服务。

假设您在$routeProvider中配置了 url： http://example.com/#/hospitals/foobar 和路由/hospitals/:hospital/，您可以：

1.将$routeParams注入指令：

adminDash.directive('hospitals', function($routeParams) {
    return {
        restrict: 'E',
        templateUrl: 'www/partials/admin/hospitals.html',
        controller: 'AdminHospitalsController',
        controllerAs: 'hospitalsCtrl',
        link: function(scope, element){
            scope.hospital = $routeParams.hospital;
        }
    };
});

2.将$routeParams注入AdminHospitalsController 

adminDash.controller('AdminHospitalsController', function($scope, $routeParams) {
    $scope.hospital = $routeParams.hospital;
}

这两种方法都会导致指令范围内的hospital=foobar;

相关文章：