AngularJS/UI-路由器從選擇/選項改變狀態

Question

所以我有一個SPA使用AngularJS/UI-Router，我有一個部分，我需要從選擇/選項更改狀態。我本來鏈接在ng-repeat這樣的：

<ul class="unstyled"> 
    <li data-ng-repeat="course in courses"> 
     <a data-ui-sref=".materials({ courseCode:course.CourseCode })">{{course.Title}}</a> 
    </li> 
</ul> 

的問題是，我將有向上的50門不同的課程可供選擇，所以我想將它們放到一個選擇/選項的設置是這樣的：

<select style="padding:3px 1px; width:100%;" data-ng-model="placeholder" data-ng-options="course.Title for course in courses track by course.CourseCode"></select> 

現在，我知道我可以通過建立一個ng-repeat，只是使用ng-model="placeholder"上述變化範圍，但我需要從選擇/選項來改變狀態的能力。基本上，我有一個檢查發生在狀態改變，將拒絕或允許基於權限檢查的訪問。如果我可以從這個狀態進行權限檢查，那麼作爲一個選項，我可以做的更多，但是切換狀態並對其進行檢查似乎更容易。

一如既往，先謝謝您！

編輯：所以我看了多一些這個，我發現我也許能做點什麼ng-switch和UI-路由器的$state.go。以下是我想出了這麼遠：

控制器：

.controller('CoursesTrackCtrl', function ($scope, $stateParams, $http, $log, $state) { 
    $scope.changeState = function (course) { 
     $state.go('.materials({ courseCode:course.CourseCode })'); 
    } 
}); 

狀態與選擇：

<select style="padding:3px 1px; width:100%;" data-ng-model="course" data-ng-options="course.Title for course in courses" data-ng-change="changeState(course)"> 
    <option value="">-- Select a Course --</option> 
</select> 

我得到了undefined is not a function當我更改選項中選擇菜單。我可以得到一個警報，彈出並傳遞各個課程，所以我知道課程正在通過示波器。我確信$state已被添加到控制器，但它似乎$state.go不會去任何地方，我仍然不確定這是否是正確的語法實際通過$stateParams通過像我正常ui-sref。

解決方案：

隨着David Spence的幫助下，我能解決我是有錯誤。我正在將$state注入到控制器中，並將其用作參數，因此引發了錯誤。謝謝！

至於解決，這是代碼爲控制器的最後一節：

.controller('CoursesTrackCtrl', function ($scope, $stateParams, $http, $log, $state) { 
    $scope.changeState = function (course) { 
     $state.go('courses.track.materials', { courseCode: course.CourseCode }); 
    } 
}); 

最大的變化在這裏是爲$state.go的語法，這需要解決國家的完整路徑（courses.track.materials VS 。只是.materials）和參數的語法不同於正常的ui-sref語法，所以它必須設置爲{ parameter : value }。

而對於國家本身：

<select style="padding:3px 1px; width:100%;" data-ng-model="course" data-ng-options="course.Title for course in courses" data-ng-change="changeState(course)"> 
    <option value="">-- Select a Course --</option> 
</select> 

這已經大多不變，但大的事情是確保course正在通過範圍傳遞。

希望這可以幫助別人！

Answer 1

我唯一能看到的是錯誤的是$state被作爲參數傳遞給changeState方法而不是被注入控制器。看下面的例子沒有任何錯誤。只需檢查您正在更改的狀態名稱是否正確。看起來有點奇怪它與一個點開始的方式......

function BasicController($scope) { 

    $scope.changeState = function(course) { 
     console.log(course.Title); 
     // todo: transition! 
    } 

    $scope.courses = [{ 
     Title: 'maths' 
    }, { 
     Title: 'science' 
    }]; 

} 

DEMO