AngularJS -将变量传递给控制器

Question

我需要向控制器发送一个参数

function config($routeProvider, $locationProvider) {

    $routeProvider

        .when('/url-1', {
            parameter: 1
        })

        .when('/url-2', {
            parameter: 2
        })

        .otherwise({
            redirectTo: '/url-1'
        });

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: true
    });
}

这是我的控制器

function MyController(parameter) {

    console.log(parameter);

}

在视图中，我只有两个链接

<a ng-href="/url-1">url-1</a>
<a ng-href="/url-2">url-1</a>

是否需要在$routeProvider中指定控制器？我只有一个控制器。我没有动态地加载视图，我只需要根据$routeProvider发送的参数做一个参数(console.log

谢谢!

Answer 1

这将是定义路由好方法，假设您有100个路由，那么路由器定义将增加到该数字。而不是多个路由具有单个通用路由。

并为路由分配一个控制器，您可以访问$routeParams接口获取路由中的可用参数。

配置

function config($routeProvider, $locationProvider) {

    $routeProvider
    .when('/url/:id', {
        controller: MyController
    })
    .otherwise({
        redirectTo: '/url/1'
    });

    $locationProvider.html5Mode({
        enabled: true,
        requireBase: true
    });
}

控制器

function MyController($routeParams) {
    console.log($routeParams);
}

如果您不想为每个路由放置另一个控制器，则可以通过将钩子放在应用程序run块内的routeChangeSuccess事件上来跟踪路由更改，如下所示

app.run(function($rootScope, $routeParams ) {
     $rootScope.$on('routeChangeSuccess', function() {
        console.log($routeParams);
     }
});

或者，您可以将该事件放在页面控制器中，该事件已放置在主体中。

function MyController($scope, $routeParams) {
    console.log("Parameters on page load "+ $routeParams);
    $scope.$on('$routeChangeSuccess', function(event, next, current) {
       console.log($routeParams);
    }
}

Answer 2

function config($routeProvider, $locationProvider) {

$routeProvider

    .when('/url-1', {
        params: {id : 1}
    })

    .when('/url-2', {
        params: {id : 2}
    })

    .otherwise({
        redirectTo: '/url-1'
    });

$locationProvider.html5Mode({
    enabled: true,
    requireBase: true
});

}

function MyController($routeParams) {
console.log($routeParams);

}