AngularJS: изменение маршрутов на основе раскрывающегося списка не работает

Я работаю над проектом, который в конечном итоге будет отзывчивым, а навигация свернется до элемента управления выбора, поэтому я нашел статью в Google об этом. Я узнал, что ng-change не запускает событие angular, но было высказано предположение, что добавление ng-click к тегам параметров заменит эту пустоту.

Когда я построил свой POC, первое, что я понял, это то, что мое копирование и вставка функции go в каждый из них означало, что дизайн не был СУХИМ (поэтому в моей голове начали звучать сигналы тревоги) и, вероятно, это означает, что это неправильный путь. сделать это.

Я продолжаю строить то, что понял из статьи и это не меняет маршруты.

Я создал плункер.

Вот 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="[email protected]" 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);
    }
});

Любая помощь приветствуется!


angularjs angular-routing
person jgravois    schedule 17.04.2014    source источник

Ответы (3)


arrow_upward
8
arrow_downward

Вы действительно можете быть более СУХИМ, чем это. Я бы:

  1. Удалите все функции go() из контроллеров представлений.

  2. Создайте новый контроллер (например, NavCtrl) для панели навигации.

    <form ng-controller="NavCtrl">

  3. Удалите директивы ngClick из элементов <option> (поскольку они, похоже, не имеют никакого эффекта - по крайней мере, в Chrome).

  4. Добавьте ngModel к элементу <select>, чтобы отслеживать выбранную страницу/представление.

  5. Добавьте прослушиватель ngChange к элементу <select>, чтобы вызывать «перенаправление» каждый раз, когда изменяется выбранная страница/представление.

    <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>

  6. Определите функцию go() внутри вышеупомянутого контроллера NavCtrl.

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

См. также эту короткую демонстрацию.

person gkalpak    schedule 17.04.2014
comment
Я бы хотел, чтобы ВЫ написали статью, которую я прочитал, так как я точно понял, что вы имели в виду в первый раз. Спасибо! - person jgravois; 17.04.2014

arrow_upward
1
arrow_downward

Функция go() не может быть вызвана, так как элемент управления select находится вне области действия контроллеров страницы.

Попробуйте это вместо этого:

plunkr

person ppa    schedule 17.04.2014
comment
Scope меня УБЬЕТ, когда я буду изучать Angular. Спасибо за помощь. - person jgravois; 17.04.2014

arrow_upward
0
arrow_downward

Чтобы дополнить приведенные выше ответы, я создал директиву, которая будет переключать маршруты в зависимости от выбранного значения.

пожалуйста, найдите планк здесь: 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>'
person Manukarthik Kattepura Ramesh    schedule 07.08.2018