AngularJS/UI-Router 从选择/选项更改状态

Question

所以我有一个使用 AngularJS/UI-Router 的 SPA，我有一个需要从选择/选项更改状态的部分。我最初在 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 种不同的类(class)可供选择，所以我想将它们放入一个选择/选项设置中，如下所示:

<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-Router 的 $state.go .到目前为止，这是我想出的:

Controller :

.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当我更改选择菜单中的选项时。我可以收到弹出并通过类(class)片段的警报，因此我知道该类(class)正在通过范围就好了。我确定 $state已添加到 Controller 中，但似乎 $state.go不会去任何地方，我什至不确定这是否是实际通过 $stateParams 的正确语法就像我使用正常的 ui-sref 一样.

解决方案 :

在 David Spence 的帮助下，我能够解决我遇到的错误。我都在注入(inject) $state进入 Controller 并将其用作参数，因此它引发了错误。谢谢!

至于解决方案，这是 Controller 的最后一段代码:

.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 与仅 .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方法而不是被注入(inject)到 Controller 中。请参阅下面的示例，没有任何错误。只需检查您要更改的州名称是否正确。它以点开头的方式看起来有点奇怪......

function BasicController($scope) {

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

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

}

DEMO