Question

我正在开发一个最终会响应的项目，导航将崩溃到一个精选控件，所以我在Google上发现了一篇关于此的文章。我了解到ng-change不会触发角度事件，但有人建议在选项标签上添加ng-click会替换该空格。

当我构建我的POC时，我意识到的第一件事就是我将go功能复制并粘贴到每个中意味着设计不干（所以警报开始在我脑海中响起）并且可能意味着这个这不是正确的方法。

我继续构建我从文章中理解的内容并且它不会改变路线。

我制作了一个plunker。

这是HTML：

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <meta charset="utf-8" />
    <title>Proof of Concept</title>
    <link data-require="bootstrap-css@*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <form>
      <select name="naver" id="naver">
        <option value="home" ng-click="go('/')">Home</option>
        <option value="first" ng-click="go('/first')">First</option>
        <option value="second" ng-click="go('/second')">Second</option>
      </select>
    </form>
    <div ng-view=""></div>
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script data-require="angular-route@*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-route.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </body>

</html>

和脚本：

var app = angular.module("myApp", ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
        .when('/', {
            templateUrl: "home.html",
            controller: 'HomeController'
        })
        .when('/first', {
            templateUrl: "first.html",
            controller: 'FirstController'
        })
        .when('/second', {
            templateUrl: "second.html",
            controller: 'SecondController'
        })
        .otherwise({ redirectTo: '/' });
});

app.controller('HomeController', function($scope, $location){
    $scope.go = function( path ){
        $location.path(path);
    }
});
app.controller('FirstController', function($scope, $location){
    $scope.go = function( path ){
        $location.path(path);
    }
});
app.controller('SecondController', function($scope, $location){
    $scope.go = function( path ){
        $location.path(path);
    }
});

非常感谢任何帮助！

Answer 1

你确实可以比那更干。我会：

从视图中删除所有go()个功能＆＃39;控制器。
为导航创建一个新的控制器（例如NavCtrl）＆＃34; bar＆＃34;。
```
<form ng-controller="NavCtrl">
```
从ngClick元素中删除<option>指令（因为它们似乎没有任何效果 - 至少在Chrome中）。
在ngModel元素中添加<select>以跟踪所选的页面/视图。

向ngChange元素添加<select>侦听器以触发＆＃34;重定向＆＃34;每次选定的页面/视图发生变化时。

<select id="naver" name="naver" ng-model="currentPage" ng-change="go(currentPage)">
  <option value="home">Home</option>
  <option value="first">First</option>
  <option value="second">Second</option>
</select>

在前面提到的go()控制器中定义NavCtrl函数。

app.controller('NavCtrl', function NavCtrl($location, $scope) {
  $scope.currentPage = 'home';
  $scope.go = function go(page) {
    $location.path('/' + page);
  };
});

另请参阅此 short demo 。

Answer 2

无法调用go（）函数，因为select控件超出了页面控制器的范围。

请改为尝试：

plunkr

Answer 3

为补充以上答案，我创建了一条指令，该指令将根据所选的值切换路由。

请在这里找到小东西： plunkr

代码如下：

  `app.controller('mainController', function($rootScope, $scope) {
  $scope.testArray = [{
    'option': 'home'
  }, {
    'option': 'first'
  }];
  $scope.testModel = $scope.testArray[0].option;
});

app.directive('selectDirective', function() {
  return {
    scope: {
      testModel: '=',
      testArray: '=',
      go: '&'
    },
    require: 'ngModel',
    template: `<select name="testModel" ng-model="testModel" value="option.option" ng-change="Model(testModel)" ng-options="option.option for option in testArray">{{option.option}}</option> 
               <option value="" selected="selected">Select an Item</option>
                </select>`,
    replace: true,
    controller: function($scope, $location) {
      $scope.Model = function(page) {
        $location.path('/' + page.option);
      }
    }
  }
});`

HTML：

'<test-directive dat-options="testArray" dat-heldmodel="testModel"></test-directive>
    <div>Selected: {{testModel}}</div>'

AngularJS：根据下拉列表更改路由不起作用

3 个答案: