AngularJS: Bagaimana cara mengalihkan tampilan dari fungsi pengontrol?

237

Saya mencoba menggunakan fitur ng-klik AngularJS untuk berganti tampilan. Bagaimana saya melakukan ini dengan kode di bawah ini?

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?
        }
    }
javascript angularjs ngroute The_Brink
sumber

Jawaban:

314

Untuk beralih di antara tampilan yang berbeda, Anda dapat langsung mengubah window.location (menggunakan layanan $ location!) Di file index.html

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

dan konfigurasikan router untuk beralih ke parsial berbeda berdasarkan lokasi (seperti yang ditunjukkan di sini https://github.com/angular/angular-seed/blob/master/app/app.js ). Ini akan memiliki manfaat riwayat serta menggunakan ng-view.

Atau, Anda menggunakan ng-include dengan parsial yang berbeda dan kemudian menggunakan ng-switch seperti yang ditunjukkan di sini ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )

Ganaraj
sumber
Saya mendapatkan kesalahan yang mengatakan bahwa hash bukan fungsi dari $ location.
The_Brink
Saya tidak melihat hash sebagai bagian dari objek $ location, tetapi ada variabel hash $$ jadi itu dan jika demikian itu tidak bekerja.
The_Brink
OK, saya menemukan cara melakukannya. $ location.path (view); ( docs.angularjs.org/guide/dev_guide.services.$location )
The_Brink
@The_Brink Terima kasih atas hasil edit. Saya tidak tahu mengapa itu ditolak. Saya membuat perubahan untuk mencerminkan apa yang saya coba katakan.
ganaraj
2
Hal terbaik untuk dilakukan sebenarnya hanyalah membuat tautan normal. <a href="https://stackoverflow.com/edit">Edit</a> Angular akan memastikan bahwa klik tersebut tidak membuat ulang halaman. Perilaku ini dapat dimodifikasi sehingga memicu memuat ulang jika diinginkan.
Anthony Martin
38

Jawaban yang diberikan benar-benar benar, tetapi saya ingin memperluas untuk pengunjung masa depan yang mungkin ingin melakukannya sedikit lebih dinamis -

Dalam tampilan - 

<div ng-repeat="person in persons">
    <div ng-click="changeView(person)">
        Go to edit
    <div>
<div>

Di controller - 

$scope.changeView = function(person){
    var earl = '/editperson/' + person.id;
    $location.path(earl);
}

Konsep dasar yang sama dengan jawaban yang diterima, hanya menambahkan beberapa konten dinamis untuk meningkatkan sedikit. Jika jawaban yang diterima ingin menambahkan ini, saya akan menghapus jawaban saya.

PW Kad
sumber
8
nitpick total, tetapi FYI, a urlsebenarnya adalah alamat web lengkap , termasuk protokol (http: //) dan semuanya. Seperti yang tersirat oleh $location.path()variabel Anda lebih baik digambarkan sebagai a path.
Zach Lysobey
Tetapi membutuhkan $ rootScope. $ Digest (); atau $ scope. $ apply (); untuk membuatnya bergerak tanpa penundaan.
Raz
23

Saya punya contoh yang berfungsi.

Begini penampilan dokter saya:

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

Seperti apa bentuk parsial saya: 

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

Seperti apa Ctrl saya:

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

aplikasi adalah modul saya:

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

Semoga ini bisa membantu!

Cody
sumber
12

Metode yang digunakan untuk semua jawaban sebelumnya untuk pertanyaan ini menyarankan untuk mengubah url yang tidak perlu, dan saya pikir pembaca harus menyadari solusi alternatif. Saya menggunakan ui-router dan $ stateProvider untuk mengaitkan nilai status dengan templateUrl yang mengarah ke file html untuk tampilan Anda. Maka itu hanya masalah menyuntikkan $ state ke controller Anda dan memanggil $ state.go ('state-value') untuk memperbarui tampilan Anda.

Apa perbedaan antara angular-route dan angular-ui-router?

Gavin Palmer
sumber
5

Ada dua cara untuk ini:

Jika Anda menggunakan ui-router atau $stateProvider, lakukan sebagai:

$state.go('stateName'); //remember to add $state service in the controller

jika Anda menggunakan angular-router atau $routeProvider, lakukan sebagai:

$location.path('routeName'); //similarily include $location service in your controller
Sukhminder Parmar
sumber
Pada hal yang membuat saya tersandung adalah menggunakan nama rute bukan nama negara ... yaitu itu harus "utama" bukan "/ utama"
Ben Schmidt
3

Tanpa melakukan perombakan penuh dari lingkungan perutean default (# / ViewName), saya dapat melakukan sedikit modifikasi tip Cody dan membuatnya bekerja dengan baik.

controller

.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
        function($route, $routeParams, $location) {
            ...
            this.goToView = function(viewName){
                $location.url('/' + viewName);
            }
        }]
    );

pandangan

...
<li ng-click="general.goToView('Home')">HOME</li>
...

Apa yang membawa saya ke solusi ini adalah ketika saya mencoba untuk mengintegrasikan widget Kendo Mobile UI ke dalam lingkungan sudut. Saya kehilangan konteks controller saya dan perilaku tag anchor biasa juga dibajak. Saya membangun kembali konteks saya dari dalam widget Kendo dan perlu menggunakan metode untuk menavigasi ... ini berhasil.

Terima kasih untuk posting sebelumnya!

beauXjames
sumber
2 
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');

Semoga ini bisa membantu Anda

Vaishali Tekale
sumber
2

Fungsi kecil ini telah membantu saya dengan baik:

    //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;
        }


    };

Anda tidak perlu path lengkap, hanya tampilan yang Anda gunakan

Shawn Dotey
sumber