AngularJS: Wie wechsle ich Ansichten von einer Controller-Funktion?

Ich versuche, mit der ng-klicken Sie auf feature von AngularJS mit dem wechseln der Ansichten. Wie würde ich gehen über das tun dies mit dem code unten?

index.html

 <div ng-controller="Cntrl">
        <div ng-click="someFunction()">
            click me
        <div>
    <div>

controller.js

  function Cntrl ($scope) {
        $scope.someFunction = function(){
            //code to change view?
        }
    }

InformationsquelleAutor der Frage The_Brink | 2012-06-12

307

Um zwischen verschiedenen Ansichten wechseln, könnte man direkt ändern das Fenster.Lage (mit dem $location-service!) in
index.html Datei
```
<div ng-controller="Cntrl">
        <div ng-click="changeView('edit')">
            edit
        </div>
        <div ng-click="changeView('preview')">
            preview
        </div>
</div>
```
Controller.js
```
function Cntrl ($scope,$location) {
        $scope.changeView = function(view){
            $location.path(view); //path not hash
        }
    }
```
und den router so konfigurieren, wechseln Sie in die verschiedenen Teiltöne basierend auf dem Standort ( wie hier gezeigt https://github.com/angular/angular-seed/blob/master/app/app.js ). Dies hätte den Vorteil, die Geschichte als auch die Verwendung von ng-view.

Alternativ verwenden Sie ng-include mit verschiedenen Teiltöne und dann mit einem ng-switch wie gezeigt hier ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )

InformationsquelleAutor der Antwort ganaraj
38

Die mitgelieferte Antwort ist absolut richtig, aber ich wollte, zu erweitern, für zukünftige Besucher kann es machen wollen ein bisschen mehr dynamisch -

In der Ansicht -
```
<div ng-repeat="person in persons">
    <div ng-click="changeView(person)">
        Go to edit
    <div>
<div>
```
In der controller -
```
$scope.changeView = function(person){
    var earl = '/editperson/' + person.id;
    $location.path(earl);
}
```
Gleichen grundlegenden Konzept wie die akzeptierte Antwort, nur das hinzufügen einige dynamische Inhalte, um es zu verbessern-ein bisschen. Wenn die akzeptierte Antwort hinzufügen will, diese werde ich löschen meine Antwort.

InformationsquelleAutor der Antwort PW Kad

Habe ich ein Beispiel zu arbeiten.

Hier ist, wie mein doc sieht:

<html>
<head>
    <link rel="stylesheet" href="css/main.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
    <script src="js/app.js"></script>
    <script src="controllers/ctrls.js"></script>
</head>
<body ng-app="app">
    <div id="contnr">
        <ng-view></ng-view>
    </div>
</body>
</html>

Hier ist, was meine teilweise sieht wie folgt aus:

<div id="welcome" ng-controller="Index">
    <b>Welcome! Please Login!</b>
    <form ng-submit="auth()">
        <input class="input login username" type="text" placeholder="username" /><br>
        <input class="input login password" type="password" placeholder="password" /><br>
        <input class="input login submit" type="submit" placeholder="login!" />
    </form>
</div>

Hier ist, was mein Strg aussieht:

app.controller('Index', function($scope, $routeParams, $location){
    $scope.auth = function(){
        $location.url('/map');
    };
});

app ist mein Modul:

var app = angular.module('app', ['ngResource']).config(function($routeProvider)...

Hoffe, das ist hilfreich!

InformationsquelleAutor der Antwort Cody

12

Die Methode, die für alle bisherigen Antworten auf diese Frage vorschlagen, die änderung der url ist nicht nötig, und ich denke, die Leser sollten sich bewusst sein, eine alternative Lösung. I mit ui-router und $stateProvider der Zuordnung einer Status-Wert mit einer templateUrl die Punkte, um die html-Datei für Ihre Ansicht. Dann ist es nur eine Frage der Injektion der $Staat in den controller und den Aufruf $Staat.gehen ("state-Wert) um die Ansicht zu aktualisieren.

Was ist der Unterschied zwischen angular-route und angular-ui-router?

InformationsquelleAutor der Antwort Gavin Palmer
5

Gibt es zwei Möglichkeiten:

Wenn Sie sind mit ui-router oder $stateProvidertun Sie es so:
```
$state.go('stateName'); //remember to add $state service in the controller
```
wenn Sie mit eckig-router oder $routeProvidertun Sie es so:
```
$location.path('routeName'); //similarily include $location service in your controller
```
InformationsquelleAutor der Antwort Sukhminder Parmar
3

Ohne dabei eine vollständige Neugestaltung der default-routing (#/ViewName) Umgebung, ich war in der Lage zu tun, eine leichte Modifikation von Cody Tipp geholt und es funktioniert Super.

den controller
```
.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );
```
Ansicht
```
...
<li ng-click="general.goToView('Home')">HOME</li>
...
```
Was brachte mich zu dieser Lösung war, wenn ich versuchte zu integrieren, Kendo Mobile UI-widget in eine eckige Umgebung, die ich verlor den Zusammenhang mit meinem controller und das Verhalten der regulären Anker-tag wurde auch vereinnahmt zu werden. Ich re-etablierten meinen Kontext innerhalb der Kendo-widget und notwendig, eine Methode zu verwenden, um zu navigieren...das hat funktioniert.

Danke für die bisherigen Beiträge!

InformationsquelleAutor der Antwort beauXjames

Firstly you have to create state in app.js as below

.state('login', {
      url: '/',
      templateUrl: 'views/login.html',
      controller: 'LoginCtrl'
    })

and use below code in controller

 $location.path('login');

Hoffe, dies wird Ihnen helfen,

InformationsquelleAutor der Antwort Vaishali Tekale

Diese kleine Funktion hat mir gut gedient:

    //goto view:
    //useage -  $scope.gotoView("your/path/here", boolean_open_in_new_window)
    $scope.gotoView = function (st_view, is_newWindow)
    {

        console.log('going to view: ' + '#/' + st_view, $window.location);
        if (is_newWindow)
        {
            $window.open($window.location.origin + $window.location.pathname + '' + '#/' + st_view, '_blank');
        }
        else
        {
            $window.location.hash = '#/' + st_view;
        }


    };

Brauchen Sie nicht den vollständigen Pfad, nur die Ansicht Umschalten, um

InformationsquelleAutor der Antwort Shawn Dotey

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.