2016-10-11 242 views
0

我需要一個參數傳送給控制器AngularJS - 傳遞變量給控制器

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中指定控制器? 我只有一個控制器。我不是加載視圖dinamically 我只需要做一個console.log(參數)基於$ routeProvider發送的參數

謝謝!

回答

0

這將是定義路由的好方法,假設你有100條路由,那麼路由定義會增加到那個數字。而是多條路線具有單一的通用路線。

然後將控制器分配給可以訪問$ routeParams API以獲取路由中可用參數的路由。

配置

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); 
} 

如果你不想把另一個控制器的各條路線,那麼你可以通過把鉤上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); 
    } 
} 
+0

我只有2條路線和i'm已經調用我的控制器在視圖與 handsome

+0

遵循我建議的方法,因爲它會更具可擴展性。所以現在如果你不想爲每個路由分配控制器,你可以在'$ routeChangeSuccess'事件 –

+0

上掛鉤,非常感謝你的建議。我不清楚爲什麼我需要爲每個路由分配一個控制器,因爲所有的URL都是相同的(也是唯一的)如果我已經在視圖中調用了控制器。在$ routeProvider中做同樣的效果是什麼? – handsome

0
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); 

}

+0

單擊鏈接時,我看不到任何更改。 :( – handsome