angular.js - angularjs ui-router 动态切换视图到指定的ui-view中

Question

a.html

<p ui-view='index'></p>

b.html

<p ui-view='content'></p>

c.html

<p>content1</p>

d.html

<p>content2</p>

a.html中绑定事件触发content视图切换到c.html或d.html

$stateProvider的config应该怎么配置
js里如果手动做切换？

Answer 1

Soalan anda tidak mempunyai maklumat kontekstual yang diperlukan, jadi saya hanya boleh bergantung pada spekulasi atau tekaan untuk menyelesaikannya

Sistem penghalaan mana-mana rangka kerja SPA adalah sama: setiap laluan sepadan dengan status aplikasi, dan perubahan dalam status aplikasi ditunjukkan dalam perubahan dalam URL sebaliknya, perubahan dalam URL akan menyebabkan perubahan dinamik dalam sistem penghalaan Muat semula keadaan aplikasi.

Dalam contoh anda, hanya terdapat kemasukan berterusan ke laluan ui-view='content', tetapi pandangan yang berbeza (c.html dan d.html) perlu memasukkannya secara dinamik, yang bermaksud c.html dan d.html Untuk sepadan dengan keadaan aplikasi yang berbeza, sistem penghalaan boleh dikemas kini secara dinamik dengan sewajarnya.

Andaikan contoh anda kelihatan seperti ini:

• Apabila /posts/show/c, ui-view='content' memaparkan c.html

• Apabila /posts/show/d, ui-view='content' memaparkan d.html

Jadi kita boleh memetakannya ke ui-router:

• state ialah posts.show

• serpihan dinamik, iaitu bahagian pembolehubah URL, sepadan dengan state dalam url, saya menamakannya :name

Pintu masuk ke

• view ialah content@posts.show

Ini sudah cukup untuk menulis kebanyakan kod:

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: /* TODO */,
                controller: ...
            }
        }
    });

});

Satu-satunya soalan yang tinggal ialah: bagaimana untuk mengemas kini :name apabila templateUrl berubah?

Seperti yang dinyatakan sebelum ini, perubahan dalam URL akan menyebabkan sistem penghalaan mengemas kini keadaan aplikasi Perubahan ini disimpan dalam objek $params dalam sistem penghalaan Kita boleh menggunakan objek ini untuk mengekstrak bahagian yang diubah dan menjana yang betul templateUrl 🎜>. Di sini saya menulis fungsi pembantu untuk melakukan ini:

angular.module('YourApp').config(function ($stateProvider) {

    $stateProvider.state('posts.show', {
        url: '/show/:name',
        views: {
            'content@posts.show': {
                templateUrl: getTemplateUrl,
                controller: ...
            }
        }
    });

    function getTemplateUrl() {
        return: 'templates/posts/' + $params.name + '.html';
    }

});

modul ui-router, templateUrl bukan sahaja menerima rentetan, tetapi juga nilai pulangan fungsi. Jadi anda boleh dapatkan:

• Apabila /posts/show/c, templateUrl ialah templates/posts/c.html

• Apabila /posts/show/d, templateUrl ialah templates/posts/d.html

Sejajar dengan itu, pautan navigasi dalam index anda bertanggungjawab untuk menukar perubahan /posts/show/:name Cara menjana pautan yang sepadan dengan serpihan dinamik terdapat dalam dokumentasi ui-router.

Answer 2

Saya rasa orang di atas membuat permainan ini terlalu rumit, bukankah lebih baik untuk menonton tutorial ui-view sahaja?