Angular ui-sref在下拉菜单上不起作用。

10 浏览
0 Comments

Angular ui-sref在下拉菜单上不起作用。

我有一个带有路由的Angular应用程序。我有一个下拉选择框，定义如下：\n

\n当我选择下拉选项之一时，它没有加载我引用的视图。我哪里错了？我还尝试了这样的方式：\n

0

3 答案

0 Comments

问题出现的原因是在使用Angular ui-sref指令时，下拉菜单中的链接无法正常工作。解决方法是改用带有"#/"前缀的通用href。具体的代码如下：

通过将ui-sref替换为带有"#/"前缀的href，可以解决下拉菜单链接无法工作的问题。

0
0 Comments

Angular UI-Sref在下拉菜单中不起作用的原因可能是由于ng-options指令的使用方式不正确。解决这个问题的方法是考虑使用ng-options代替ui-sref。

在上面的代码中，我们可以看到MainController控制器中定义了一个$scope.options数组，其中包含了四个选项。然后，通过ng-options指令将这些选项绑定到了下拉菜单中。ng-options的语法是"opt.value as opt.label for opt in options"，它的作用是将$scope.options数组中的每个元素的value属性作为选项的值，将label属性作为选项的显示文本。

另外，我们还可以看到在$scope.$watch函数中，当$scope.tt的值发生变化时，会调用$state.go方法进行页面跳转。这里的$scope.tt是通过ng-model指令与下拉菜单进行了绑定。

除了上述的解决方法之外，还可以考虑使用ng-change指令来检测下拉菜单的变化。ng-change指令的作用是在下拉菜单的值发生变化时触发一个函数。根据以上代码的修改，我们可以在下拉菜单中添加ng-change="changeState()"，然后在MainController中定义一个changeState函数来处理页面跳转的逻辑。

通过正确使用ng-options指令和ng-change指令，我们可以解决Angular UI-Sref在下拉菜单中不起作用的问题。

0
0 Comments

问题的原因是在select - option标签内无法使用a标签。解决方法是编写一个函数，在select的改变或者模型改变时触发该函数，可以尝试使用ng-change指令。具体代码如下：

控制器代码如下：

angular.module('myApp')
.controller('myController', ['$scope', '$state', function ($scope, $state){
    $scope.locationChangeFunction = function(){
         $state.go($scope.tt);
    }
}]);

如果想要兼顾两种解决方法，可以使用以下代码：

通过ng-change指令等待模型的改变，改变DOM，从而触发改变。这样就不需要运行一个消耗资源的$watch函数。使用Hieu TB的方法可能更可靠，但需要尝试。我更喜欢使用事件来进行改变，因为$watch函数会一直运行，而事件（如ng-change）只在需要时运行函数。然而，我不知道ng-change是否在模型改变之前或之后触发，即使它触发了，可能会有竞态条件，但使用$watch函数可以确保模型已经改变。我仍然建议尽量使用事件而不是$watch函数，因为如果由于其他原因改变了模型，你又要再次改变页面。

感谢_T指出这一点。我认为"ng-change"是最好的解决方法，因为我也急于回答问题而忘记了这一点。我已经为你的答案点了赞，:)

0