Angular.js: menyuntikkan $ location rewrites dan merusak tautan jangkar

Dibuat pada 23 Okt 2013  ·  74Komentar  ·  Sumber: angular/angular.js

Cukup menyuntikkan $ location di mana saja di aplikasi Anda akan merusak tautan jangkar (yang hingga sekarang telah berfungsi selama 20 tahun !). Berikut adalah contoh kode yang menunjukkan masalah tersebut: https://gist.github.com/skivvies/7125406

Berikut ini tautan rawgithub sehingga Anda benar-benar dapat menjalankan kode ini: https://rawgithub.com/skivvies/7125406/raw/b42a135b7a40db7dc00a7726fa8efd080e14b7b7/index.html

Harap perhatikan bilah alamat peramban saat Anda mengeklik "tautan ke jangkar". Bandingkan ini dengan kode yang hampir sama persis, dengan satu-satunya perbedaan adalah bahwa $ location tidak diinjeksi: https://gist.github.com/skivvies/7125477

Sekali lagi, berikut adalah tautan rawgithub ke versi ini sehingga Anda dapat menjalankannya: https://rawgithub.com/skivvies/7125477/raw/1b4a4d2692616c42b92b813b4c7d1e26ffe38c9b/index.html

Langkah reproduksi:

  1. Buka jendela browser baru langsung ke jangkar di halaman dengan aplikasi Angular yang memasukkan $ location, misalnya https://rawgithub.com/skivvies/7125406/raw/b42a135b7a40db7dc00a7726fa8efd080e14b7b7/index.html#anchor
  2. Angular membajak hash url dan menulis ulang untuk menambahkan garis miring di depan, misalnya https://rawgithub.com/skivvies/7125406/raw/b42a135b7a40db7dc00a7726fa8efd080e14b7b7/index.html#/anchor
  3. Browser tidak menggulir halaman ke bawah ke jangkar tertaut ke
  4. Mengklik link apa pun di halaman ke jangkar (misalnya, link "link ke jangkar" dalam kode contoh) juga gagal untuk menggulir halaman ke jangkar

(Saya menekan ini karena saya menggunakan arahan toggle dropdown angular-bootstrap yang menyuntikkan $ location, saya tidak pernah benar-benar menyuntikkannya ke aplikasi saya, tetapi hanya bergantung pada angular-bootstrap sudah cukup untuk memutus tautan jangkar saya. Terima kasih untuk ini posting untuk memberi tahu saya. / cc @ pkozlowski-opensource)

http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html tampak seperti solusi yang menjanjikan tetapi akhirnya tidak berhasil. Pembaruan: Lihat komentar di bawah.

Lots of comments $location moderate broken expected use bug

Komentar yang paling membantu

Hai,

Saya telah menemukan solusi untuk mimpi buruk ini, tetapi saya baru mengenal AngularJS dan tidak tahu apakah itu solusi yang tepat.
Saya telah mengaktifkan html5mode seperti ini:

saApp.config (function($locationProvider) {
    $locationProvider.html5Mode({
    enabled : true,
    requireBase: false,
    rewriteLinks : false
    });
});

Sekarang semua tautan berfungsi seperti yang diharapkan dan tidak ada kesalahan pada js.

Semua 74 komentar

saya juga melihat masalah ini.

melihat perilaku yang sama persis.

Mungkin punya waktu untuk meretas PR untuk hal ini. Adakah petunjuk dari tim inti yang satu ini sebelum saya menyelami?

Memperhatikan beberapa perbaikan bug terkait $ lokasi lainnya telah masuk ke rilis beberapa poin terakhir, bagus! Saya akan mencoba meluangkan waktu untuk memperbaiki akhir pekan ini. Tim Angular, silakan hubungi saya jika itu bukan ide yang bagus atau jika Anda memiliki masukan lain.

Berikut ini intinya dengan target = "_ self": https://gist.github.com/skivvies/8430668

Dan berikut ini tautan rawgithub jadi Anda bisa mencobanya:
https://rawgithub.com/skivvies/8430668/raw/e17b8cae60faaec3a07084d657c0eeaf47f8b3f3/index.html

Saat link diklik, viewport berhasil digulir ke
jangkar yang ditargetkan, tetapi hash url diubah menjadi # / jangkar daripada

jangkar, dan lebih buruk lagi, Angular kini telah merusak tombol kembali browser. (Jika

Anda memiliki halaman dalam riwayat Anda sebelum ini, mengklik tombol kembali
tidak akan membawa Anda ke sana sebagaimana mestinya, tetapi sekarang tidak melakukan apa pun selain menyebabkan a
kedipan sesaat.)

Jadi ini bukan solusi lengkap, tetapi masih merupakan solusi
perbaikan. Terima kasih atas tipnya!

Pada hari Selasa, 14 Jan 2014 jam 21:38, Llyle van Schalkwyk <
[email protected]> menulis:

Tampaknya menggunakan target = "_ self" dapat mengatasi masalah ini.

-
Balas email ini secara langsung atau lihat di Gi tHubhttps: //github.com/angular/angular.js/issues/4608#issuecomment -32329769
.

Mungkin karena, ketika tidak dalam html5Mode, $ location mengasumsikan bahwa Anda menggunakan perutean Angular dan memperlakukan semua tautan "#" seperti itu.

Jadi ada dua opsi / solusi:

  1. Jika Anda menggunakan ng-click untuk memperbarui $location.hash dan memanggil $anchorScroll dalam $timeout , tampaknya masalah telah diperbaiki: http://plnkr.co / edit / nzTBmWFKOMVkxrcJSiPW? p = pratinjau
  2. Gunakan html5Mode , dan itu juga menyelesaikan masalah: http://plnkr.co/edit/qAH0bPAMdUKRYblW6I6k?p=preview

Saya kira apa yang saya katakan adalah, bahwa pada titik $ location digunakan, jika Anda tidak dalam mode HTML5, semua yang ada setelah "#" adalah domain perutean sudut, dan itu akan berperilaku berbeda dari yang mungkin Anda lakukan mengharapkan.

Terima kasih atas komentarnya, @blesh.

Saya pikir solusi pertama yang diusulkan untuk mengubah setiap href menjadi ng-click yang memperbarui $ location.hash dan memanggil $ anchorScroll dalam $ timeout jelek. Ini membutuhkan pembatalan html Anda yang valid untuk upaya yang tidak tepat dalam menerapkan ulang perilaku yang benar di javascript. Mengingat ini telah berfungsi di browser - tanpa memerlukan javascript - selama 20 tahun terakhir, saya pikir solusi yang dapat diterima tidak akan bertentangan dengan butiran web secara drastis. Jangan sampai Tim Berners-Lee ingin ikut membunuh kita di malam hari!

Sedangkan untuk proposal kedua, saya mengujinya, dan itu tidak cukup hanya mengatur html5Mode ke true, Anda juga harus memperbarui semua tautan jangkar Anda untuk menambahkan target = "_ self" agar berfungsi, seperti yang telah Anda lakukan di plunker Anda . Ini, setidaknya, adalah solusi lengkap (yaitu dengan hanya target = "_ self" dan tanpa html5Mode, hash url akan salah diawali dengan /, seperti disebutkan sebelumnya), dan tidak merusak web seperti yang dilakukan proposal pertama . Sayang sekali Anda harus memperbarui setiap tautan jangkar di aplikasi Anda dengan beberapa markup ajaib yang sepertinya tidak mencapai apa pun untuk orang lain yang melihat kode (atau Anda sendiri, 3 bulan kemudian), tetapi IMO itu jauh lebih baik daripada hidup dengan bug atau menggunakan proposal pertama.

Sekali lagi terima kasih atas komentarnya. Dan masih berharap untuk mengambil celah pada suatu waktu jika tidak ada orang lain yang mengalahkan saya untuk itu.

Hanya ingin menambahkan, metrik lain untuk solusi adalah apa yang akan Anda lakukan setelah bug yang sedang ditangani benar-benar diperbaiki. Dengan proposal pertama, untuk mendapatkan keuntungan dari perbaikan bug, Anda harus mengubah semua ng-klik kembali ke href yang sesuai. Dengan yang kedua, Anda masih bisa mendapatkan keuntungan dari perbaikan tanpa harus menghilangkan semua atribut target = "_ self", yang dapat dilakukan di lain waktu jika ada pekerjaan yang lebih mendesak yang harus dilakukan.

Saya tidak yakin bagaimana ini bisa ditambal tanpa refactor routing yang besar, yang mungkin berantakan. Semoga berhasil.

Saya bisa saja salah tentu saja, saya belum melihat terlalu dekat pada kode itu.

Oke, jadi ada satu solusi lagi ...

<a href="#/#anchor">Go to the id, "anchor"</a>

Saya harus memikirkannya, dan saya menyadari, $ location hanya untuk digunakan dengan perutean, sungguh, dan ketika Anda merutekan Anda dapat menggulir ke id pada halaman dengan tautan dengan "hash" pada rute. jadi url tautannya seperti http://hostname/path/to/app/#/angular/route/#hashOnPage , yang sama dengan /path/to/app/#/angular/route/#hashOnPage mana hashOnPage adalah ID dari apa yang ingin Anda scroll. Bergantung di mana Anda berada, di mana aplikasi berada, dan rute apa yang Anda gunakan di dalamnya, Anda dapat menggunakannya, cukup tambahkan # untuk menambahkan hash ke sesuatu di layar ... merasakan.

Apakah itu lebih efektif menyelesaikan masalah Anda?

Pada akhirnya, Anda sebaiknya tidak menggunakan $location kecuali Anda menggunakan perutean. Karena itulah yang dibangun di sekitar itu.

Terima kasih atas ide tambahannya, @blesh. Dalam kasus di mana saya menemukan ini, saya tidak menggunakan rute, dan tidak membutuhkan $ lokasi sama sekali. Saya hanya menggunakan angular-bootstrap untuk sesuatu yang sama sekali tidak berhubungan dengan perutean. Namun, karena salah satu arahan _its_ menggunakan $ location, itu menyebar seperti virus, memutus tautan jangkar tidak hanya di dalam aplikasi Angular saya, tetapi bahkan ke yang di luar elemen DOM dengan aplikasi ng-diterapkan. Idealnya, area yang terpengaruh dengan menggunakan $ location akan lebih dibatasi, sehingga tidak akan memengaruhi kode di tempat yang jauh dan tidak terduga.

Jadi solusi kedua Anda masih paling cocok untuk kasus ini, di mana Anda tidak memerlukan $ lokasi atau perutean, tetapi beberapa ketergantungan menggunakannya mengacaukan tautan jangkar Anda.

Sepertinya angular-bootstrap tidak lagi menggunakan $ location pada angular-ui / bootstrap @ 35c93076 (yang mungkin juga memperbaiki angular-ui / bootstrap # 619 - lihat bagaimana perilaku $ location saat ini dapat menyebabkan bug seperti ini di mana-mana?) , jadi untuk pengguna angular-bootstrap lain yang tidak membutuhkan $ location sendiri (angkat tangan?), mengupgrade ke versi terbaru juga harus menghilangkan bug ini, selama tidak ada lagi yang mereka sentuh menggunakan $ location.

Terima kasih juga atas peringatan Anda bahwa memperbaiki ini akan memerlukan refactor perutean yang besar, yang mungkin berantakan. Jika itu benar, mungkin masuk akal bagi pengembang inti untuk ikut serta dalam utas ini sebelum kontributor komunitas yang kurang berpengalaman menghabiskan banyak waktu pada tambalan.

ada pembaruan untuk menyelesaikan ini? Saya juga memiliki dependensi modul yang menyertakan $ location sehingga semua tautan jangkar saya rusak.

Masih berharap untuk mendengar dari dev inti sebelum mengambil bidikan di PR karena kedengarannya perlu koordinasi untuk digabungkan.

Juga baru saja mengetahui bahwa milestone telah diubah dari "1.2.x" menjadi "backlog" di beberapa titik. Apakah itu berarti ini tidak akan dirilis dalam waktu dekat? / cc @btford

@skivvies , tonggak pencapaian backlog berarti kami tidak secara aktif mendorongnya untuk rilis berikutnya, tetapi jika ada orang di komunitas yang peduli untuk menyelidiki dan memberikan informasi lebih lanjut tentang ini, kami dapat membuat keputusan tentang seberapa serius masalahnya dan memprioritaskannya.

Awal yang baik dengan ini adalah memberikan tes di inti sudut yang gagal, mereproduksi masalah dengan cara yang minimal. Jika tidak, berikan reproduksi masalah di plnkr atau jsbin atau sesuatu. Saya pikir dalam pelacak masalah seperti chromium, Anda akan memberi label ini "belum dikonfirmasi", kami benar-benar perlu melihat bahwa ini tidak berfungsi seperti yang diharapkan.

(Ini hanya pendapat pribadi saya dan tidak mencerminkan pendapat tim Angular)

Jika ini adalah solusi saya. link kembali masih berfungsi, dan tidak perlu mengubah html saya.

satu-satunya masalah adalah hal itu menciptakan verbositas di querystring. mis .: mySite.com/page.html#/anchor#anchor

letakkan di dalam $ scope-on-location-change-start:

if($location.hash() && $location.hash().length>=1)
{
var path = $location.path();
var potentialAnchor = path.substring(path.lastIndexOf("/")+1);
if ($("#" + potentialAnchor).length > 0) {                          
    $location.hash(potentialAnchor);
    $anchorScroll();
}
}

edit: dan saya mengujinya ke IE8, masih berfungsi di sana.

@caitp menulis:

Awal yang baik dengan ini adalah memberikan tes di inti sudut yang gagal, mereproduksi masalah dengan cara yang minimal. Jika tidak, berikan reproduksi masalah di plnkr atau jsbin atau sesuatu. Saya pikir dalam pelacak masalah seperti chromium, Anda akan memberi label ini "belum dikonfirmasi", kami benar-benar perlu melihat bahwa ini tidak berfungsi seperti yang diharapkan.

Sepertinya Anda melewatkan deskripsi tiket. Anda akan melihat tautan di sana untuk reproduksi minimal. Masalah ini jelas tidak belum dikonfirmasi. Saya percaya @btford mengonfirmasinya, dan merupakan orang yang awalnya merencanakannya untuk 1.2.x.

Mengirimkan PR dengan unit test yang gagal adalah ide yang bagus. Saya sudah menghabiskan banyak waktu untuk menyiapkan deskripsi masalah. Adakah orang lain yang bisa maju dan menulis ujian?

Terima kasih.

@ jasons-novaleaf menulis:

Jika ini adalah solusi saya. link kembali masih berfungsi, dan tidak perlu mengubah html saya. satu-satunya masalah adalah hal itu menciptakan verbositas di querystring. mis .: mySite.com/page.html#/anchor#anchor

Jika Anda menggunakan solusi ini, kecuali jika Anda ingin memutus tautan setelah masalah diperbaiki (atau mungkin menulis kode lama untuk mengalihkannya kembali), Anda harus berkomitmen untuk terus menggunakan string kueri verbose ini bahkan setelah masalah diperbaiki . Jadi saya lebih suka solusi menambahkan target = "_ self" ke tautan jangkar dan memastikan html5Mode benar. Dengan begitu Anda mendapatkan tautan jangkar yang bagus, bersih, dan tampak normal sebelum dan sesudah perbaikan. (Dan tombol kembali masih berfungsi.)

Terima kasih telah berbagi!

@skivvies , sebenarnya saya telah memperhatikan utas ini untuk beberapa waktu sekarang, dan saya masih belum benar-benar yakin tentang apa pun yang benar-benar mengkonfirmasi hal ini. Saya masih tidak bisa memutuskan apakah ini adalah kesalahan aplikasi atau bukan, itulah mengapa saya mengatakan saya perlu melihat reproduksi yang lebih minimal dan tepat.

Tapi ya, alasan Anda tidak melihat PR! status umumnya karena ini belum terbukti menjadi masalah nyata. Jika kami tahu pasti bahwa ini adalah suatu masalah, maka kami pasti akan mengatakan "tolong sumbangkan perbaikan untuk ini, kami mungkin tidak bekerja keras untuk memasukkan ini ke rilis berikutnya, tetapi jika seseorang datang dengan perbaikan yang tidak tidak merusak hal-hal lain dengan buruk, mereka mungkin bagus "

Sekali lagi, saya memparafrasekan, tetapi inilah yang sebenarnya telah saya lihat dari masalah ini selama beberapa bulan terakhir.

Wow, oke, ini benar-benar mengejutkan saya. https://gist.github.com/skivvies/7125406 menurut saya seperti reproduksi seminimal mungkin. Dan tingkah laku saat kau lari yang sepertinya rusak tak terbantahkan.

Saya tidak tahu bagaimana ini bisa menjadi lebih minimal atau lebih jelas rusak, tetapi jika Anda dapat membantu saya untuk memahami, saya akan dengan senang hati melakukan lebih banyak untuk membuat kasus yang lebih jelas.

Setidaknya, apakah Anda setuju bahwa perilaku https://gist.github.com/skivvies/7125406 cukup tidak terduga untuk menjamin beberapa dokumentasi yang memperingatkan pengguna tentang hal itu?

Keluarkan $ location dan tidak apa-apa, tambahkan kembali (atau bergantung pada sesuatu (yang bergantung pada sesuatu ...) yang menambahkannya), dan tiba-tiba tautan tautan aplikasi Anda rusak, dan Anda mungkin tidak tahu Mengapa. Ini jelas menggigit semua orang yang ikut campur di sini, dan menurut saya seperti definisi bug yang halus dan tidak diinginkan.

Saya kira Anda bisa mengatakan itu bug untuk tidak membuat instance $ location pada bootstrap, tapi itu tidak ada hubungannya

Ya, karena Anda masih akan melihat bug tersebut jika Anda membuat instance $ location di
bootstrap. Jadi tidak melakukannya membuat reproduksi lebih minimal.

Pada hari Jumat, 7 Feb 2014 pukul 13.19, Caitlin Potter [email protected] :

Saya kira Anda bisa mengatakan bahwa itu bug untuk tidak memberi contoh $ lokasi pada
bootstrap, tapi itu tidak ada hubungannya

Balas email ini secara langsung atau lihat di Gi tHubhttps: //github.com/angular/angular.js/issues/4608#issuecomment -34482945
.

Lokasi pembuatan instance pada bootstrap juga tidak akan membuat tautan ke jangkar bernama berfungsi seperti yang diharapkan, karena URL yang ditulis ulang termasuk dalam SPA dan mencegah perilaku default. Di html5mode kita akan melihat fragmen hash dengan benar (pembicaraan tentang penggabungan $ anchorScroll ke $ location dapat memperbaiki ini), tetapi itu akan bekerja secara tidak konsisten dari mode hashbang, itulah mengapa itu agak bermasalah

Instansiasi lokasi pada bootstrap juga tidak akan membuat tautan ke jangkar bernama berfungsi seperti yang diharapkan

Benar, itulah yang saya maksud dengan "Anda masih akan melihat bug jika Anda membuat instance $ location pada bootstrap", tetapi terima kasih atas info tambahan dan kejelasannya. Bagus untuk memperjelas bahwa solusi yang memerlukan pengaturan html5Mode ke true tidak akan berfungsi pada browser yang tidak mendukung html5Mode.

Menarik ada pembicaraan tentang penggabungan $ anchorScroll dan $ location, belum pernah mendengarnya.

Ini benar-benar harus diperbaiki. Tidak menyadari menambahkan bootstrap sudut ke situs saya akan merusak navigasi situs kami. Saya juga tidak bisa menemukan solusi.

fyi, sepertinya solusi saya hanya setengah berfungsi dengan tombol kembali. tidak yakin kenapa .. pokoknya. ya ini harus diperbaiki :(

Baiklah, saya akan mencoba menyusun perbaikan untuk 1.3, tapi saya tidak yakin seberapa sulitnya untuk memperbaikinya, jadi ...

@caitp Mengagumkan, terima kasih! Setelah Anda menyelami, jika Anda melihat bagaimana itu harus dilakukan tetapi tidak segera punya waktu untuk melakukannya, jika Anda meninggalkan garis besar seperti yang Anda inginkan diperbaiki, mungkin saya atau anggota komunitas lain akan punya waktu untuk mengirimkan PR .

@ shawn-simon dkk. Terima kasih banyak telah ikut mendukung masalah ini. Untuk solusi Anda, saya pikir idealnya solusi tidak akan memerlukan mengubah atribut "href" atau apa pun yang hanya perlu Anda ubah kembali setelah perbaikan selesai. Jadi menurut saya solusi target = "_ self" + html5mode masih yang terbaik (jika Anda mampu untuk tidak mendukung browser pra-html5).

Saya pikir langkah 1) memastikan bahwa $ location disuntikkan pada bootstrap, sehingga perilaku pustaka konsisten.

Langkah 2) memperlakukan tag jangkar secara berbeda (Yaitu, jika HREF dimulai dengan '#', abaikan).

Jika ini tidak berhasil, pada dasarnya penggabungan $ anchorScroll ke $ location perlu dilakukan, dan sudah ada beberapa diskusi tentang ini.

Saya tidak benar-benar tahu berapa banyak pekerjaan yang harus dilakukan agar ini berfungsi, tetapi kita akan lihat.

sebuah ide: Anda dapat menjaga fungsionalitas saat ini tetap sama (untuk menghindari efek samping) tetapi perbaiki masalah ini untuk orang-orang seperti kami dengan melakukan sesuatu seperti:

1) periksa apakah querystring dimulai dengan nilai $ location.hashPrefix ()
2) jika tidak, abaikan saja.
3) jika ya, maka lakukan alur kerja saat ini.

jadi orang-orang seperti saya yang mengatur

$location.hashPrefix('!');

akan memiliki tautan jangkar yang berfungsi. sedangkan orang yang menggunakan hashPrefix default (kosong) akan melihat perilaku saat ini.

Ini tidak akan digabungkan hingga 1.3.x (jadi perubahan yang melanggar diperbolehkan), dan saya ingin perilakunya konsisten. Idealnya, tautan jalur harus berfungsi dalam mode hashbang, jadi hanya memulai dengan # sudah cukup untuk mengatakan abaikan saja

ng-include require, tetapi secara opsional menggunakan $ anchorScroll, yang menarik $ location. Ini berarti bahwa hanya dengan menggunakan ng-include sekali, saya sekarang perlu menulis ulang semua tag anchor saya.

Itu rusak, atau setidaknya perilaku bodoh yang tidak masuk akal. Dengan senang hati membantu. Beri tahu saya jika lebih banyak orang yang menampar itu akan membantu.

6899 berpotensi memperbaiki ini ketika html5Mode diaktifkan, tetapi saya tidak yakin. Saya tidak akan menutup masalah karena cukup terpisah --- namun, seseorang harus menguji ini dan memverifikasi untuk saya, itu akan sangat membantu.

Hai @sukabumi_sukabumi ,

Berikut adalah percabangan dari inti asli yang mendemonstrasikan bug, dengan snapshot sudut terbaru (1.3.0-build.2608 + sha.49e7c32) menggantikan angular 1.2.9, dan bug masih terjadi:

https://rawgit.com/skivvies/11025788/raw/38e62189d6072c6cb83b049582a833a62bf5d747/index.html

Sepertinya perubahan dari # 6899 yang Anda sebutkan akan mendarat di snapshot itu, tapi tolong beri tahu saya jika saya harus menguji versi sudut yang berbeda.

Terima kasih, dan didorong bahwa mungkin ada kemajuan lagi dalam hal ini.

@skivvies terima kasih telah menjawab! Sayangnya pengerjaannya belum sepenuhnya selesai :( Ada tambahan untuk ini di # 7152. Saya pikir pengujian harus lulus sekarang di dalamnya, dan seharusnya bekerja lebih baik dengan browser modern sekarang.

Anda mungkin ingin mencoba tambalan itu dan melihat apakah itu menyelesaikannya (dengan html5Mode diaktifkan). Masih belum yakin itu akan berhasil, karena saya pikir kami masih mencegah perilaku default dan tidak meminta $ anchorScroll untuk melakukan hal itu. Jadi mungkin tidak akan memperbaiki tautan jangkar. Tapi seharusnya jauh lebih sederhana untuk membuatnya berfungsi sekarang, setidaknya untuk html5Mode.

Akan sangat bagus jika tim AngularJS bisa mencatat masalah ini di dokumentasi. Saya baru saja kehilangan satu hari melalui aturan penulisan ulang saya mencoba mencari tahu mengapa tautan saya rusak sebelum saya menyadari itu terkait dengan sudut.

Saya merasakan sakit Anda @halleycarleton. Itulah yang saya takutkan dengan masalah ini. Tiga bulan lalu saya berkata:

Setidaknya, apakah Anda setuju bahwa perilaku https://gist.github.com/skivvies/7125406 cukup tidak terduga untuk menjamin beberapa dokumentasi yang memperingatkan pengguna tentang hal itu?

Tetapi diskusi lebih lanjut tidak pernah mengindikasikan patch dokumentasi akan diterima. @caitp , karena tidak jelas seberapa cepat masalah ini akan diperbaiki, apakah Anda akan menerima tambalan dokumentasi tentang bug ini untuk sementara?

Apa cara terbaik untuk memverifikasi bahwa saya terkena ini? Saya sebenarnya harus menggunakan $ location di run block aplikasi saya, dan saya juga menggunakan Angular Bootstrap. Saya telah mencoba memperbarui ke 0.11 dari Bootstrap dan bahkan untuk sementara mengomentari penggunaan $ lokasi saya, tetapi tidak ada dadu.

Tombol kembali berfungsi ... kadang-kadang untuk saya. Itu tidak berfungsi ketika saya pertama kali mulai mengerjakan aplikasi (ini adalah aplikasi Angular pertama saya) dan itu mulai bekerja tiba-tiba pada satu titik tanpa perubahan sadar atau yang dapat dikaitkan dari saya. Jelas saya mengubah sesuatu, tapi tidak tahu apa. Dalam beberapa minggu terakhir tampaknya telah dilanggar lagi.

Saya tidak dapat menemukan bantuan di mana pun untuk mengaktifkan tombol kembali dalam situasi saya. Tidak tahu harus mengatributkan pemecahan apa. Saya kira saya akan segera mulai berburu pada tingkat detail yang konyol, tetapi tidak ada tanda bahaya yang dapat saya lihat ...

FWIW, kami juga terjebak di 1.2, jadi porting ke 1.3 bukanlah perbaikan yang valid bagi kami.

Apakah masalah telah diperbaiki di 1.3.x? IIRC juga memiliki masalah ini.

Terkena bug ini. semua tautan non-sudut putus. Apakah ada rencana untuk memperbaikinya?

Untuk mengatasi masalah ini saya menggunakan arahan yang mengubah tautan jangkar menjadi url lengkap, mungkin seseorang merasa berguna: https://gist.github.com/dcadenas/566434ba0af9f3eabb07

Ada PR untuk ini, berikut demo yang berfungsi http://plnkr.co/edit/WVPYzaXOKujcb5vSbvJz?p=preview

Ini tidak sempurna (ini hanya berfungsi untuk tautan fragmen hash relatif), tetapi ini adalah awal yang baik --- jangan ragu untuk memberikan pemikiran Anda

Saya tidak berpikir ini terbatas hanya pada interaktivitas tautan jangkar. Jika saya mencoba menyegarkan example.com#param , ini juga akan disetel ulang ke example.com#/param .

@ caitp dimana PR itu? Bagaimana kabarnya?

8508 --- itu diblokir untuk mendapatkan beberapa barang dikembalikan, yang saya bicarakan dengan Igor tentang besok.

K. Saya sedang mengerjakan catatan dokumentasi kecil untuk https://docs.angularjs.org/guide/ $ location sekarang - menurut Anda itu perlu, atau haruskah saya menunda?

Maksud saya, Anda dapat mengerjakannya --- Anda harus melihat apakah CL yang saya tautkan memperbaiki masalah pertama yang Anda bicarakan, karena saya ragu bahwa itu akan (setidaknya dalam mode hashbang) --- yang dikembalikan melakukan hanya benar-benar mempengaruhi mengklik tautan jangkar

@caitp Mengirimkan PR, jika Anda ingin memeriksanya sebentar. Saya memeriksa cabang Anda - bekerja dengan baik untuk masalah saya, terima kasih untuk itu. Tidak sabar untuk melihatnya bergabung.

Jelek ... Lupa mematikan html5mode. Tidak berfungsi jika dinonaktifkan. Masih butuh pekerjaan. : /

ya saya pikir itu bug terpisah

Aight. Haruskah saya membuka tiket untuk itu?

Tentu

Apakah ada pembaruan tentang bug ini, dan atau apakah tim inti masih terbuka untuk PR untuk memperbaiki fungsi ini (meskipun ini adalah perubahan yang sangat merusak)?

@samccone , @tbosch memberikan perbaikan untuk ini.

@ Caitp apakah ada tautan ke solusi yang diselesaikan? Aku pasti melewatkannya. Terima kasih

22948807e324eb0b182b15b31045dc306a9f3231 (dan banyak komit terkait lainnya) adalah perbaikan besar

Tunggu, bug apa yang sedang kita bicarakan? Itu adalah bug lokasi yang "besar", tetapi ada banyak yang lain juga, banyak yang telah diperbaiki

ah ya sudah diperbaiki di sana, tunggu saja rilis 1.2.x itu.

Terima kasih!

Oh! >. <Saya menghabiskan 2 hari mencari tahu mengapa itu tidak berhasil. Saya senang ini juga hadir di 1.2.x: +1:. Ada ide kapan itu akan dirilis?

setel target = "_ self" di setiap tag anchor. Solusi ini berfungsi dengan baik untuk saya.

set target = "_ self" perbaiki masalah saya. Terima kasih :)

menyetel target = "_ self" hanya memperbaiki masalah secara internal ke situs itu sendiri. Jika Anda ingin menautkan dari luar ke tautan jangkar, masih ada garis miring yang mengerikan (pembajakan sudut) tepat di dalam tautan Anda. Ini mengerikan!

Saya menggunakan versi 1.3.9 dan itu belum berhasil. Mengapa orang mengatakan itu diperbaiki di 1.2 ??

@wobine Kami tidak mengatakan itu diperbaiki di 1.2. Ini telah diperbaiki dan mungkin akan digabungkan menjadi 1.2.x tetapi itu belum terjadi.

Saya berhasil mendapatkan jangkar yang berfungsi dengan benar menggunakan pengaturan berikut (ini hanya mempertimbangkan jangkar id dan mungkin mengacaukan perutean sudut untuk kasus penggunaan yang lebih kompleks)

module.config([ '$anchorScrollProvider', function($anchorScrollProvider) {
    $anchorScrollProvider.disableAutoScrolling();
}])
.run(['$rootScope', '$location', function($rootscope, $location) {
    // mimic the anchor behaviour, avoid using the $anchorScroll service
    $rootscope.$on('$locationChangeSuccess', function() {
        var element = $('#' + $location.url().replace('/', ''));
        if(element.length > 0) element[0].scrollIntoView();
    });
}]);

Hai,

Saya telah menemukan solusi untuk mimpi buruk ini, tetapi saya baru mengenal AngularJS dan tidak tahu apakah itu solusi yang tepat.
Saya telah mengaktifkan html5mode seperti ini:

saApp.config (function($locationProvider) {
    $locationProvider.html5Mode({
    enabled : true,
    requireBase: false,
    rewriteLinks : false
    });
});

Sekarang semua tautan berfungsi seperti yang diharapkan dan tidak ada kesalahan pada js.

Saya mengatasi ini dengan menggunakan acara ng-click dengan perintah window.open (url):

<a class="viewLink" href ng-click="linkViewed()">

$scope.mediaViewed = function linkViewed() { window.open($scope.link) }

Saya dapat mengonfirmasi bahwa jawaban manual berfungsi seperti yang diharapkan dengan AngularJS v1.3.13.

Satu-satunya masalah adalah ketika saya langsung memuat mis. Http://site.com/#test dan saya mengklik lagi #test, URL finalnya adalah http://site.com/#test #test.

@manutalcual , solusi Anda menyelesaikannya.

+1 lainnya untuk solusi @manutalcual . Mengingat implikasi dari angular-bootstrap, mungkin juga perlu dicatat bahwa saya menggunakan 0.13.0 dari itu, yang mencakup perubahan yang disebutkan dalam percakapan di atas.

14315 $ anchorScroll merusak tautan jangkar dengan html5mode diaktifkan

Ini solusi saya:
Hentikan perintah propagasi acara dengan prioritas tinggi

var app = angular.module('my.module', []);

app.directive('externalAnchorLink', [function () {
    return {
        restrict: 'A',
        priority: 0,
        link: function (scope, el) {
            /*jslint unparam: true*/
            el.on('click', function (event) {
                event.stopPropagation();
            });
        }
    };
}]);

Lalu di HTML

<a href="/test/example/#my-anchor" external-anchor-link>link text</a>

Mengenai masalah asli ( $location mempengaruhi perilaku default tautan jangkar):

Memang Angular menggunakan # (berpotensi dengan awalan hash setelah # ) untuk mengidentifikasi rute "sisi-klien" (dalam mode non-HTML5). Merupakan tugas $location untuk berinteraksi dengan bagian hash dari URL. Jadi, karena tidak mungkin membedakan #some-client-side-route-path untuk #i-want-to-scroll-to-an-element , itu harus selalu menganggap itu adalah jalur rute sisi klien.

Ada beberapa solusi yang tersedia (sebagian besar dibahas di atas) - terutama jika Anda tidak menggunakan $location / perutean sisi klien di aplikasi Anda (tetapi mungkin memiliki dependensi yang membuatnya):

  1. Gunakan jalur kosong dan hash rute sisi klien: href="##i-want-to-scroll-to-an-element" .
  2. Konfigurasikan $locationProvider untuk menggunakan mode HTML5
  3. Ubah awalan hash (yang secara default kosong), sehingga #foo tidak dikenali sebagai jalur rute sisi klien. Misalnya dengan $locationProvider.hashPrefix('!') , rute sisi klien harus dimulai dengan #! (misalnya #!foo ). Jadi #foo tidak dikenali sebagai jalur dan perilaku browser normal berlaku.

Catatan: Dimulai dengan v1.6 awalan hash default akan menjadi ! , jadi usecase OP akan bekerja di luar kotak (tanpa perlu memanggil $locationProvider.hashPrefix('!') secara manual). Di versi yang lebih lama, Anda perlu mengkonfigurasinya sendiri.

Saya memahami mungkin ada beberapa roblem yang dibahas dalam masalah ini, tetapi ini tidak membantu dalam menilai, menyelidiki, dan semoga memperbaikinya, jadi (karena masalah asli termasuk dalam kategori _ diperbaiki _ / _ berfungsi seperti yang diharapkan_), saya akan menutup masalah ini . Jika Anda masih mengalami masalah lain (yang belum dilaporkan), buka masalah terpisah.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat