Angular-ui.router: URL ohne Ansichtsaktualisierung aktualisieren

Basierend auf unseren vorherigen Diskussionen möchte ich Ihnen eine Vorstellung davon geben, wie Sie hier UI-Router verwenden. Ich glaube, ich verstehe Ihre Herausforderung richtig ... Es gibt ein funktionierendes Beispiel . Wenn dies nicht vollständig passt, nehmen Sie es als Inspiration

HAFTUNGSAUSSCHLUSS: Mit einem Plunker konnte ich dies nicht erreichen: http://m.amsterdamfoodie.nl/ , aber das Prinzip sollte in Beispiel Ähnlichem stehen

Es gibt also eine Zustandsdefinition (wir haben nur zwei Zustände)}

  $stateProvider
    .state('main', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'tpl.layout.html',
            controller: 'MainCtrl',
          },
          '[email protected]' : { templateUrl: 'tpl.right.html',}, 
          '[email protected]' : {
            templateUrl: 'tpl.map.html',
            controller: 'MapCtrl',
          },
          '[email protected]' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
    .state('main.criteria', {
        url: '^/criteria/:criteria/:value',
        views: {
          'map' : {
            templateUrl: 'tpl.map.html',
            controller: 'MapCtrl',
          },
          'list' : {
            templateUrl: 'tpl.list.html',
            controller: 'ListCtrl',
          },
        },
      })
}];

Dies wäre unser Haupt tpl.layout.html

<div>

  <section class="main">

    <section class="map">
      <div ui-view="map"></div>
    </section>

    <section class="list">
      <div ui-view="list"></div>
    </section>

  </section>

  <section class="right">
    <div ui-view="right"></div>
  </section>

</div>

Wie wir sehen können, zielt der Hauptzustand auf diese verschachtelten Ansichten des Hauptzustands: 'viewName @ main', z. '[email protected]'

Auch die Unteransicht main.criteria fügt sich in layout - Ansichten ein. 

Seine URL beginnt mit einem Zeichen ^ (url : '^/criteria/:criteria/:value'), das einen /-Schrägstrich für main und keinen doppelten Schrägstrich für untergeordnetes Element erlaubt

Und es gibt auch Controller, die hier etwas naiv sind, aber sie sollten zeigen, dass im Hintergrund echte Datenlast (basierend auf Kriterien) sein könnte.

Das Wichtigste dabei ist, dass die PARENT MainCtrl den $scope.Model = {} erstellt. Diese Eigenschaft wird (dank der Vererbung) zwischen Eltern und Kindern geteilt. Deshalb funktioniert das alles:

app.controller('MainCtrl', function($scope)
{
  $scope.Model = {};
  $scope.Model.data = ['Rest1', 'Rest2', 'Rest3', 'Rest4', 'Rest5'];  
  $scope.Model.randOrd = function (){ return (Math.round(Math.random())-0.5); };
})
.controller('ListCtrl', function($scope, $stateParams)
{
  $scope.Model.list = []
  $scope.Model.data
    .sort( $scope.Model.randOrd )
    .forEach(function(i) {$scope.Model.list.Push(i + " - " + $stateParams.value || "root")})
  $scope.Model.selected = $scope.Model.list[0];
  $scope.Model.select = function(index){
    $scope.Model.selected = $scope.Model.list[index];  
  }
})

Hier erfahren Sie, wie wir die von UI-Router bereitgestellten Funktionen nutzen können:

• Absolute Routen (^)
• Bereichsvererbung nur durch View-Hierarchie
• Namen anzeigen - relative und absolute Namen

Überprüfen Sie den obigen Auszug hier , in das Arbeitsbeispiel

Erweitern: neuer Plunker hier

Wenn die Kartenansicht nicht wiederhergestellt werden soll, können Sie diese Option aus dem untergeordneten Status def weglassen:

.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      // 'map' : {
      //  templateUrl: 'tpl.map.html',
      //  controller: 'MapCtrl',
      //},
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
      },
    },
  })

Jetzt werden in unserer Kartenansicht lediglich Änderungen im Modell empfangen (können betrachtet werden), aber Ansicht und Controller werden nicht erneut gerendert

Es gibt auch einen anderen Plunker http://plnkr.co/edit/y0GzHv?p=preview , der die controllerAs verwendet.

.state('main', {
    url: '/',
    views: {
      '@' : {
        templateUrl: 'tpl.layout.html',
        controller: 'MainCtrl',
        controllerAs: 'main',        // here
      },
      ...
    },
  })
.state('main.criteria', {
    url: '^/criteria/:criteria/:value',
    views: {
      'list' : {
        templateUrl: 'tpl.list.html',
        controller: 'ListCtrl',
        controllerAs: 'list',      // here
      },
    },
  })

und das könnte so verwendet werden:

<h4>{{main.hello()}}</h4>
<h4>{{list.hello()}}</h4>

Der letzte Plunker ist hier