简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
angular.js - 单页应用的页面title大家都是怎么处理的
漂亮男人
漂亮男人 2017-05-15 16:57:53
0
3
560

现在越来越多的网站都在使用spa技术，前端自己路由，局部刷新页面，来实现的单页应用也就webapp，相比较之前的整站都是独立的页面，每个页面都有单独的html来写上<title>你是猴子派来的逗比么</title>，那单页应用大家是怎么处理页面title问题的了

漂亮男人
漂亮男人

membalas semua(3)
曾经蜡笔没有小新
曾经蜡笔没有小新2017-05-15 16:59:53 Tingkat 3

Saya melihat jawapan pada stackoverflow, dia melaksanakannya seperti ini

  • Mula-mula tambahkan pengawal global pada html: 

    <html ng-app="plunker" ng-controller="MainCtrl">

  • Kemudian saya menulis sebuah kilang: 

    app.factory('Page', function(){
      var title = 'default';
      return {
        title: function() { return title; },
        setTitle: function(newTitle) { title = newTitle; }
      };
    });

  • Kemudian index.html anda boleh mendapatkan tajuk halaman melalui <h1>{{ Page.title() }}</h1> di halaman utama

  • Sangat mudah untuk menetapkan tajuk halaman tertentu yang sepadan. Hanya masukkan ini Page ke dalam pengawal anda 

    function Page2Ctrl($scope, Page) {
      Page.setTitle('title1');
    }

Berikut ialah pelaksanaan khusus: http://plnkr.co/edit/0e7T6l?p=info

Suka +0
Tambah Balasan
给我你的怀抱
给我你的怀抱2017-05-15 16:59:53 Tingkat 2

Gunakan

dalam jsdocument.title = '...' untuk mengubah suai title

Jika anda mahukan hasil yang lebih baik, anda boleh menggunakan ciri baharu H5 history.pushState(state, title, url) Kaedah ini bukan sahaja boleh mengubah suai title, tetapi juga mengubah suai alamat url pada masa yang sama dan merekodkan maklumat ini. ke dalam timbunan sejarah Pengguna akan mendapat pengalaman yang lebih baik apabila menggunakan butang belakang penyemak imbas mereka.

Suka +0
Tambah Balasan
習慣沉默
習慣沉默2017-05-15 16:59:53 Tingkat 1 
<title>{{mainAppCtrl.title}}</title>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！