Angular.js: حقن $ location يعيد كتابة ويكسر روابط الارتساء

تم إنشاؤها على ٢٣ أكتوبر ٢٠١٣  ·  74تعليقات  ·  مصدر: angular/angular.js

ما عليك سوى حقن موقع $ location في أي مكان في التطبيق الخاص بك يكسر روابط الربط (والتي تعمل حتى الآن منذ 20 عامًا !) فيما يلي مثال على رمز يوضح المشكلة: https://gist.github.com/skivvies/7125406

إليك رابط rawgithub حتى تتمكن بالفعل من تشغيل هذا الكود: https://rawgithub.com/skivvies/7125406/raw/b42a135b7a40db7dc00a7726fa8efd080e14b7b7/index.html

يرجى مراقبة شريط عنوان المتصفح عند النقر فوق "ارتباط إلى الرابط". قارن هذا بالرمز نفسه تقريبًا ، مع الاختلاف الوحيد هو أن الموقع $ لم يتم حقنه: https://gist.github.com/skivvies/7125477

مرة أخرى ، إليك رابط rawgithub لهذا الإصدار حتى تتمكن من تشغيله: https://rawgithub.com/skivvies/7125477/raw/1b4a4d2692616c42b92b813b4c7d1e26ffe38c9b/index.html

خطوات الاستنساخ:

  1. افتح نافذة متصفح جديدة مباشرة إلى نقطة ارتساء على صفحة باستخدام تطبيق Angular الذي يقوم بحقن موقع $ ، على سبيل المثال https://rawgithub.com/skivvies/7125406/raw/b42a135b7a40db7dc00a7726fa8efd080e14b7b7/index.html#anchor
  2. يقوم Angular باختطاف تجزئة عنوان url وإعادة كتابتها لإضافة شرطة مائلة رائدة ، على سبيل المثال https://rawgithub.com/skivvies/7125406/raw/b42a135b7a40db7dc00a7726fa8efd080e14b7b7/index.html#/anchor
  3. لا يقوم المستعرض بتمرير الصفحة لأسفل إلى الرابط المرتبط
  4. يؤدي النقر فوق أي روابط على الصفحة إلى الرابط (على سبيل المثال ، رابط "رابط إلى الرابط" في مثال الرمز) إلى فشل تمرير الصفحة إلى الرابط

(لقد ضربت هذا لأنني أستخدم توجيه تبديل القائمة المنسدلة لـ angular-bootstrap والذي يقوم بحقن موقع $ ، لا أقوم بحقنه في تطبيقي أبدًا ، لكن الاعتماد ببساطة على angular-bootstrap يكفي لكسر روابط المرساة الخاصة بي. بفضل هذا آخر لإفراغ مني. / cc @ pkozlowski- مفتوح المصدر)

بدا http://www.benlesh.com/2013/02/angular-js-scrolling-to-element-by-id.html كحل بديل واعد ولكنه لم ينجح في النهاية. تحديث: انظر التعليقات أدناه.

Lots of comments $location moderate broken expected use bug

التعليق الأكثر فائدة

أهلا،

لقد وجدت حلاً لهذا الكابوس ، لكنني جديد على AngularJS ولا أعرف ما إذا كان هذا هو الحل الصحيح.
لقد قمت بتمكين وضع html5 مثل هذا:

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

تعمل جميع الروابط الآن كما هو متوقع ولا توجد أخطاء في js.

ال 74 كومينتر

أنا أيضا أرى هذه المشكلة.

رؤية نفس السلوك بالضبط.

قد يكون لديك بعض الوقت لاختراق العلاقات العامة لهذا الأمر. أي مؤشرات من الفريق الأساسي حول هذا الموضوع قبل الغوص فيه؟

لاحظت أن بعض إصلاحات الأخطاء المتعلقة بالموقع بالدولار قد دخلت في إصدارات النقاط الزوجية الأخيرة ، رائع! سأحاول قضاء بعض الوقت في هذا الإصلاح في نهاية هذا الأسبوع. فريق Angular ، يرجى الاتصال بي إذا لم تكن هذه فكرة جيدة أو إذا كان لديك أي مدخلات أخرى.

إليك جوهر الهدف = "_ self": https://gist.github.com/skivvies/8430668

وهنا رابط Rawgithub حتى تتمكن من تجربته:
https://rawgithub.com/skivvies/8430668/raw/e17b8cae60faaec3a07084d657c0eeaf47f8b3f3/index.html

عند النقر على الرابط ، يتم تمرير منفذ العرض بنجاح إلى ملف
نقطة الارتساء المستهدفة ، ولكن تم تغيير تجزئة عنوان URL إلى # / مرساة بدلاً من

مرساة ، والأسوأ من ذلك ، أن Angular قد كسر الآن زر الرجوع في المتصفح. (إذا

لديك صفحة في السجل الخاص بك قبل هذا ، بالنقر فوق زر الرجوع
لن يأخذك إلى الأمر كما ينبغي ، ولكنه لا يفعل شيئًا سوى التسبب في ملف
وميض مؤقت.)

لذلك هذا ليس حلاً كاملاً ، لكنه لا يزال إلى حد ما ملف
تحسين. شكرا على الاكرامية!

يوم الثلاثاء 14 كانون الثاني (يناير) 2014 الساعة 9:38 مساءً ، Llyle van Schalkwyk <
[email protected]> كتب:

يبدو أن استخدام الهدف = "_ self" يعمل على حل المشكلة.

-
قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/4608#issuecomment -32329769
.

ربما يرجع ذلك إلى أنه عندما لا يكون في html5Mode ، فإن الموقع $ يفترض أنك تستخدم توجيه Angular وتعامل جميع الروابط "#" على هذا النحو.

لذلك هناك خياران / حلول بديلة:

  1. إذا كنت تستخدم ng-click لتحديث $location.hash واستدعيت $anchorScroll في $timeout ، يبدو أنه حل المشكلة: http://plnkr.co / تحرير / nzTBmWFKOMVkxrcJSiPW؟ p = معاينة
  2. استخدم html5Mode ، وهذا أيضًا يحل المشكلة: http://plnkr.co/edit/qAH0bPAMdUKRYblW6I6k؟p=preview

أعتقد أن ما أقوله هو أنه عند النقطة التي يتم فيها استخدام الموقع $ ، إذا لم تكن في وضع HTML5 ، فإن كل شيء بعد "#" هو نطاق توجيه Angular ، وسيتصرف بشكل مختلف عما قد تفعله توقع.

شكرا على التعليقات ،blesh.

أعتقد أن الحل الأول المقترح لتغيير كل href إلى ng-click والذي يحدّث $ location.hash ويستدعي $ anchorScroll في مهلة $ هو أمر قبيح. يتطلب الأمر التراجع عن ملف html الصالح لمحاولة غير قوية لإعادة تنفيذ السلوك الصحيح في جافا سكريبت. نظرًا لأن هذا كان يعمل في المتصفحات - دون الحاجة إلى جافا سكريبت - على مدار العشرين عامًا الماضية ، أعتقد أن الحل البديل المقبول يجب ألا يتعارض مع نمط الويب بشكل جذري. دعونا لا نجعل تيم بيرنرز لي يريد أن يقتلنا في الليل!

أما بالنسبة للاقتراح الثاني ، فقد اختبرته ، ولا يكفي فقط تعيين html5Mode على true ، بل يتعين عليك أيضًا تحديث جميع روابط الارتساء الخاصة بك لإضافة target = "_ self" حتى يعمل ، كما فعلت في plunker . هذا ، على الأقل ، هو حل بديل كامل (على سبيل المثال ، مع target = "_ self" فقط ولا يوجد html5Mode ، فإن تجزئة عنوان URL ستبدأ بشكل غير صحيح بـ / ، كما ذكرنا سابقًا) ، ولا تؤدي إلى كسر الويب بالطريقة التي يعمل بها الاقتراح الأول . إنه لأمر سيء للغاية أن تضطر إلى تحديث كل رابط مرساة في تطبيقك ببعض الترميز السحري الذي يبدو أنه لا يحقق أي شيء لشخص آخر ينظر إلى الكود (أو نفسك ، بعد 3 أشهر) ، لكن IMO أفضل بكثير من العيش مع الخطأ أو باستخدام الاقتراح الأول.

شكرا مرة أخرى للتعليق. وما زلت آمل في الحصول على صدع في التصحيح بعض الوقت إذا لم يضربني أي شخص آخر.

أردت فقط أن أضيف ، مقياسًا آخر لحل بديل هو ما ستفعله بمجرد إصلاح الخطأ الذي يتم حله بالفعل. مع الاقتراح الأول ، للاستفادة من إصلاح الخطأ ، يجب عليك تغيير جميع النقرات مرة أخرى إلى hrefs المناسبة. مع الثانية ، لا يزال بإمكانك الاستفادة من الإصلاح دون الحاجة إلى إزالة جميع سمات target = "_ self" ، والتي يمكن إجراؤها في وقت لاحق إذا كان هناك عمل أكثر إلحاحًا للقيام به.

لست متأكدًا من كيفية تصحيح هذا الأمر بدون إعادة بناء كبيرة للتوجيه ، والتي قد تكون فوضوية. حظا سعيدا.

قد أكون مخطئًا بالطبع ، فأنا لم ألقي نظرة فاحصة على هذا الرمز.

حسنًا ، هناك حل آخر آخر ...

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

لقد فكرت في الأمر ، وأدركت أن موقع $ يستخدم فقط مع التوجيه ، حقًا ، وعندما تقوم بالتوجيه ، يمكنك التمرير إلى المعرفات على صفحة بها روابط بواسطة "تجزئة" على الطريق. لذا فإن عنوان url للرابط هو مثل http://hostname/path/to/app/#/angular/route/#hashOnPage ، وهو نفس /path/to/app/#/angular/route/#hashOnPage حيث hashOnPage هو معرف ما تريد التمرير إليه. اعتمادًا على المكان الذي تتواجد فيه ، والمكان الذي يعمل فيه التطبيق ، والمسار الذي تريده فيه ، يمكنك استخدام ذلك ، وضغط ثانية # لإضافة تجزئة إلى شيء ما على الشاشة ... اشارة.

هل هذا يحل مشكلتك بشكل أكثر فعالية؟

في النهاية ، يجب ألا تستخدم $location إلا إذا كنت تستخدم التوجيه. نظرًا لأن هذا نوعًا ما تم بناؤه حوله.

شكرًا على الفكرة الإضافية ،blesh. في الحالة التي وصلت فيها إلى هذا ، لم أكن أستخدم المسارات ، ولم أكن بحاجة إلى موقع $ على الإطلاق. كنت ببساطة أستخدم angular-bootstrap لشيء لا علاقة له تمامًا بالتوجيه. ومع ذلك ، نظرًا لأن أحد توجيهات _its_ يستخدم $ location ، فقد انتشر مثل الفيروس ، مما أدى إلى كسر روابط الربط ليس فقط داخل تطبيق Angular الخاص بي ، ولكن حتى الروابط الموجودة خارج عنصر DOM مع تطبيق ng-app. من الناحية المثالية ، ستكون المنطقة المتأثرة باستخدام $ location أكثر تقييدًا ، لذا لن تؤثر على الكود في الأماكن البعيدة وغير المشكوك فيها.

لذلك لا يزال الحل البديل الخاص بك هو الأنسب لهذه الحالة ، حيث لا تحتاج إلى $ location أو التوجيه ، ولكن بعض التبعية التي تستخدمها تؤدي إلى إفساد روابط الارتساء الخاصة بك.

يبدو أن angular-bootstrap لم يعد يستخدم موقع $ اعتبارًا من angular-ui / bootstrap @ 35c93076 (والذي قد يصلح أيضًا angular-ui / bootstrap # 619 - انظر كيف يمكن أن يتسبب سلوك موقع $ الحالي في حدوث أخطاء مثل هذه في كل مكان؟) ، لذلك بالنسبة لمستخدمي angular-bootstrap الآخرين الذين لا يحتاجون إلى موقع $ بأنفسهم (برفع الأيدي؟) ، يجب أيضًا أن تتخلص الترقية إلى أحدث إصدار من هذا الخطأ ، طالما أنه لا يوجد شيء آخر يلمسونه يستخدم $ location.

نشكرك أيضًا على تحذيراتك من أن إصلاح هذا قد يستلزم إعادة بناء كبيرة للتوجيه ، والتي قد تكون فوضوية. إذا كان هذا صحيحًا ، فمن المنطقي أن يتناغم مطور أساسي في هذا الموضوع قبل أن يقضي مساهم المجتمع الأقل خبرة الكثير من الوقت في التصحيح.

أي تحديثات على حل هذا؟ لدي أيضًا تبعيات للوحدة النمطية تتضمن موقع $ ، لذا فإن جميع روابط الإرساء الخاصة بي معطلة.

ما زلت آمل أن أسمع من أحد المطورين الأساسيين قبل أخذ لقطة في العلاقات العامة لأنه يبدو أنه سيتطلب التنسيق للدمج.

لاحظت أيضًا أنه تم تغيير المعلم الرئيسي من "1.2.x" إلى "backlog" في مرحلة ما. هل هذا يعني أن هذا لن يتم إصداره في أي وقت قريب؟ / سم مكعبbtford

skivvies ، إن الإنجاز المتراكم يعني حقًا أننا لا ندفع بنشاط

بداية جيدة مع هذا هو تقديم اختبار في الزاوية الأساسية التي تفشل ، وإعادة إنتاج المشكلة بأسلوب بسيط. بخلاف ذلك ، قدم نسخة طبق الأصل من المشكلة على plnkr أو jsbin أو شيء من هذا القبيل. أعتقد أنه في أداة تعقب المشكلات مثل الكروم يمكنك تسميتها "غير مؤكد" ، نحتاج حقًا إلى رؤية أن هذا لا يعمل كما هو متوقع.

(هذا مجرد رأيي الشخصي ولا يعكس بالضرورة رأي فريق Angular)

لمعلوماتك ، هذا هو الحل الخاص بي. لا تزال الروابط الخلفية تعمل ، ولا حاجة لتغيير لغة تأشير النص الفائق.

المشكلة الوحيدة هي أنها تخلق الإسهاب في سلسلة الاستعلام. مثال: mySite.com/page.html#/anchor#anchor

ضع داخل نطاق $-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();
}
}

تحرير: واختبرته وصولاً إلى ie8 ، لا يزال يعمل هناك.

كتب caitp :

بداية جيدة مع هذا هو تقديم اختبار في الزاوية الأساسية التي تفشل ، وإعادة إنتاج المشكلة بأسلوب بسيط. بخلاف ذلك ، قدم نسخة طبق الأصل من المشكلة على plnkr أو jsbin أو شيء من هذا القبيل. أعتقد أنه في أداة تعقب المشكلات مثل الكروم يمكنك تسميتها "غير مؤكد" ، نحتاج حقًا إلى رؤية أن هذا لا يعمل كما هو متوقع.

يبدو أنك قد فاتك وصف التذكرة. سترى روابط هناك للحد الأدنى من الاستنساخ. هذه القضية بالتأكيد ليست غير مؤكدة. أعتقد أن btford أكد ذلك ، وكان الشخص الذي حدده في الأصل مقابل 1.2.x.

على الرغم من ذلك ، يعد تقديم العلاقات العامة مع اختبار الوحدة الفاشل فكرة رائعة. لقد قضيت الكثير من الوقت في إعداد وصف المشكلة بالفعل. هل يمكن لأي شخص آخر أن يصعد ويكتب الاختبار؟

شكرا.

كتب @ jasons-novaleaf:

لمعلوماتك ، هذا هو الحل الخاص بي. لا تزال الروابط الخلفية تعمل ، ولا حاجة لتغيير لغة تأشير النص الفائق. المشكلة الوحيدة هي أنها تخلق الإسهاب في سلسلة الاستعلام. مثال: mySite.com/page.html#/anchor#anchor

إذا كنت تستخدم هذا الحل البديل ، إلا إذا كنت ترغب في قطع الروابط الخاصة بك بعد إصلاح المشكلة (أو ربما كتابة رمز قديم لإعادة توجيهها مرة أخرى) ، فسيتعين عليك الالتزام بالاستمرار في استخدام سلاسل الاستعلام المطولة هذه حتى بعد إصلاح المشكلة . لذلك أفضل الحل لإضافة target = "_ self" إلى روابط الربط والتأكد من صحة html5Mode. بهذه الطريقة تحصل على روابط رابط لطيفة ونظيفة وذات مظهر طبيعي قبل الإصلاح وبعده. (ولا يزال زر الرجوع يعمل.)

شكرا لك على المشاركة ، مع ذلك!

skivvies ، لقد كنت أهتم بهذا الموضوع لبعض الوقت الآن ، وما زلت غير مقتنع حقًا بأي شيء يؤكد ذلك حقًا. ما زلت غير قادر على تحديد ما إذا كان هذا خطأ في التطبيق أم لا ، ولهذا السبب أقول إنني بحاجة إلى رؤية استنساخ أكثر دقة وأقل حدًا.

لكن نعم ، سبب عدم رؤية PRs plz! الحالة بشكل عام لأنه لم يتم إثبات أن هذه مشكلة حقيقية حتى الآن. إذا علمنا على وجه اليقين أن هذه مشكلة ، فسنقول بالتأكيد "الرجاء المساهمة بإصلاح هذه المشكلة ، فقد لا نعمل بجد لإدخالها في الإصدار التالي ، ولكن إذا توصل شخص ما إلى حل لا لا تكسر الأشياء الأخرى بشكل سيء ، ربما تكون جيدة "

مرة أخرى ، أقوم بإعادة الصياغة ، لكن هذا حقًا ما كنت أراه من هذه المشكلة خلال الأشهر القليلة الماضية.

واو ، حسنًا ، لقد كان هذا مفاجأة لي تمامًا. https://gist.github.com/skivvies/7125406 يبدو لي أنه الحد الأدنى من الاستنساخ الذي يمكنك الحصول عليه. والسلوك عند الركض يبدو أنه كسر بشكل لا جدال فيه.

لا أعرف كيف يمكن أن يكون هذا أقل ما يمكن أو أنه كسر بشكل أكثر وضوحًا ، ولكن إذا كان بإمكانك مساعدتي على الفهم ، فسيسعدني أن أفعل المزيد لتوضيح الحالة.

على أقل تقدير ، هل توافق على أن سلوك https://gist.github.com/skivvies/7125406 غير متوقع بما يكفي لتبرير بعض الوثائق التي تحذر المستخدمين من ذلك؟

قم بإخراج موقع $ location ولا بأس بذلك ، وأعد إضافته (أو اعتمد على شيء ما (يعتمد على شيء ما ...) يضيفه) ، وفجأة تعطلت روابط الربط لتطبيقك ، ومن المحتمل ألا يكون لديك أي فكرة لماذا. من الواضح أن هذا قد قضم كل الأشخاص الذين يتناغمون هنا ، ويبدو لي وكأنه تعريف للخلل الدقيق وغير المرغوب فيه.

أعتقد أنه يمكنك القول إنه خطأ عدم إنشاء مثيل $ location على bootstrap ، ولكن هذا نوع من غير ذي صلة

نعم هو كذلك ، حيث ستظل ترى الخطأ إذا قمت بإنشاء مثيل $ location على
التمهيد. لذا فإن عدم القيام بذلك يؤدي إلى الحد الأدنى من التكاثر.

في الجمعة 7 فبراير 2014 الساعة 1:19 مساءً ، كتبت كايتلين بوتر إخطارات github.com:

أعتقد أنه يمكنك القول إنه خطأ عدم إنشاء مثيل $ location على
التمهيد ، ولكن هذا نوع من غير ذي صلة

قم بالرد على هذه الرسالة الإلكترونية مباشرة أو tHubhttps: //github.com/angular/angular.js/issues/4608#issuecomment -34482945
.

إن إنشاء موقع على التمهيد لن يجعل الارتباط إلى المرساة المسماة يعمل كما هو متوقع أيضًا ، لأن عنوان URL المعاد كتابته يقع ضمن SPA ويمنع السلوك الافتراضي. في html5mode ، سنرى جزء التجزئة بشكل صحيح (المحادثات حول دمج $ anchorScroll في موقع $ يمكن أن تصلح هذا) ، لكنها ستعمل بشكل غير متسق من وضع hashbang ، وهذا هو السبب في أن هذا نوع من الإشكالية

إن إنشاء موقع على التمهيد لن يجعل الارتباط إلى المرساة المسماة يعمل كما هو متوقع أيضًا

حسنًا ، هذا ما قصدته بعبارة "ستظل ترى الخطأ إذا قمت بإنشاء مثيل $ location على التمهيد" ، ولكن شكرًا على المعلومات الإضافية والوضوح. من الجيد توضيح أن الحل البديل الذي يتطلب تعيين html5Mode على "صحيح" لن يعمل على المتصفحات التي لا تدعم html5Mode.

من المثير للاهتمام الحديث عن دمج $ anchorScroll و $ location ، لم أسمع بذلك.

يجب أن يتم إصلاح هذا حقا. لم أكن أدرك أن إضافة bootstrap الزاوي إلى موقعي سيؤدي إلى تعطيل التنقل في موقعنا. لا يمكنني اكتشاف حل بديل أيضًا.

لمعلوماتك ، يبدو أن الحل الخاص بي يعمل نصفًا فقط مع الأزرار الخلفية. لست متأكدا لماذا .. على أي حال. نعم ، يجب إصلاح هذا :(

حسنًا ، سأحاول وضع إصلاح لـ 1.3 ، لكنني لست متأكدًا من مدى صعوبة إصلاح هذا ، لذا ...

caitp رائع ، شكرا لك! بعد الغوص ، إذا رأيت كيف يجب أن يتم ذلك ولكن ليس لديك وقت على الفور للقيام بذلك ، إذا تركت مخططًا للطريقة التي تريدها لإصلاحها ، فربما يكون لدي أو أي عضو آخر في المجتمع الوقت لتقديم العلاقات العامة .

@ شون سيمون وآخرون. شكرًا جزيلاً على المشاركة في دعم هذه المشكلة. إعادة الحل الخاص بك ، أعتقد بشكل مثالي أن الحل البديل لن يتطلب تغيير أي سمات "href" أو أي شيء آخر يجب عليك تغييره مرة أخرى بمجرد وصول الإصلاح. لذلك أعتقد أن الحل البديل target = "_ self" + html5mode لا يزال هو الأفضل (إذا كنت تستطيع عدم دعم متصفحات ما قبل html5).

أعتقد أن الخطوة 1) تضمن حقن موقع $ في bootstrap ، بحيث يكون سلوك المكتبة ثابتًا.

الخطوة 2) هي معاملة علامات الارتساء بشكل مختلف (IE ، إذا بدأت HREF بـ "#" ، فتجاهلها).

إذا لم يفلح ذلك ، فيجب أن يتم دمج $ anchorScroll في موقع $ ، وكان هناك بعض النقاش حول هذا الأمر بالفعل.

لا أعلم تمامًا حجم العمل المطلوب لإنجاح هذا الأمر ، لكننا سنرى.

فكرة: يمكنك الاحتفاظ بالوظيفة الحالية كما هي (لتجنب الآثار الجانبية) ولكن حل هذه المشكلة لأشخاص مثلنا عن طريق القيام بشيء مثل:

1) تحقق مما إذا كانت سلسلة الاستعلام تبدأ بقيمة $ location.hashPrefix ()
2) إذا لم يحدث ذلك ، فتجاهله.
3) إذا كان الأمر كذلك ، فقم بسير العمل الحالي.

حتى الناس مثلي الذين وضعوا

$location.hashPrefix('!');

سيكون له روابط إرساء تعمل. حيث يرى الأشخاص الذين يستخدمون hashPrefix الافتراضي (فارغ) السلوك الحالي.

لن يتم دمجها حتى 1.3.x (لذا لا بأس في كسر التغييرات) ، وأريد أن يكون السلوك متسقًا. من الناحية المثالية ، يجب أن تعمل روابط المسار في وضع التجزئة ، لذا فإن مجرد البدء بـ # يجب أن يكون كافيًا لتجاهله

يتطلب ng-include ، ولكن اختياريًا يستخدم $ anchorScroll ، والذي يسحب موقع $ location. هذا يعني أنه بمجرد استخدام ng-include مرة واحدة ، فأنا الآن بحاجة إلى إعادة كتابة جميع علامات الارتساء الخاصة بي.

هذا مكسور ، أو على الأقل سلوك منفرج بشكل سخيف. أكثر من سعيد للمساعدة. اسمحوا لي أن أعرف ما إذا كان المزيد من الناس تقريع ذلك سيساعد.

من المحتمل أن يعمل 6899 على إصلاح هذا عند تمكين html5Mode ، لكنني لست متأكدًا. لن أغلق المشكلة لأنها منفصلة بدرجة كافية - ومع ذلك ، يجب على شخص ما اختبار ذلك والتحقق من أجلي ، سيكون ذلك مفيدًا للغاية.

مرحبًا caitp ،

فيما يلي مفترق من الجوهر الأصلي يوضح الخطأ ، مع أحدث لقطة زاوية (1.3.0-build.2608 + sha.49e7c32) تحل محل الزاوية 1.2.9 ، ولا يزال الخطأ يحدث:

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

يبدو أن التغييرات من # 6899 التي ذكرتها كانت ستصل إلى تلك اللقطة ، ولكن يرجى إعلامي إذا كان ينبغي عليّ إجراء اختبار مقابل إصدار مختلف من الزاوية.

شكرًا ، وشجعنا أنه قد يكون هناك المزيد من التقدم في هذا الشأن.

skivvies شكرا على الرد! لسوء الحظ ، لم يكتمل العمل بعد: (هناك ملحق لهذا في # 7152. أعتقد أن الاختبارات يجب أن تجتاز الآن ، ويجب أن تعمل بشكل أفضل مع المتصفحات الحديثة الآن.

قد ترغب في تجربة هذا التصحيح ومعرفة ما إذا كان يحل هذا (مع تمكين html5Mode). ما زلت غير متأكد من أنها ستنجح ، لأنني أعتقد أننا ما زلنا نمنع السلوك الافتراضي ولا نطلب من $ anchorScroll القيام بعمله. لذلك من المحتمل ألا يصلح روابط الإرساء. ولكن يجب أن يكون من الأسهل كثيرًا جعلها تعمل الآن ، على الأقل بالنسبة لـ html5Mode.

سيكون من الرائع لو تمكن فريق AngularJS من وضع ملاحظة حول هذه المشكلة في الوثائق. لقد فقدت يومًا للتو من خلال قواعد إعادة الكتابة الخاصة بي في محاولة لمعرفة سبب كسر الروابط الخاصة بي قبل أن أدرك أنها مرتبطة بالزاوية.

أشعر بألمكhalleycarleton. هذا بالضبط ما كنت أخاف منه في هذه القضية. قبل ثلاثة أشهر قلت:

على أقل تقدير ، هل توافق على أن سلوك https://gist.github.com/skivvies/7125406 غير متوقع بما يكفي لتبرير بعض الوثائق التي تحذر المستخدمين من ذلك؟

لكن المزيد من النقاش لم يشر أبدًا إلى أنه سيتم قبول تصحيح التوثيق. caitp ، نظرًا لأنه من غير الواضح متى سيتم إصلاح هذا الخطأ ، فهل تقبل تصحيحًا من التوثيق حول هذا الخطأ في الوقت الحالي؟

ما هي أفضل طريقة للتحقق من أنني أصابني هذا؟ لقد تمكنت بالفعل من استخدام $ location في كتلة تشغيل تطبيقي ، وأنا أستخدم أيضًا Angular Bootstrap لقد حاولت التحديث إلى 0.11 من Bootstrap وحتى التعليق مؤقتًا على استخدامي للموقع ، لكن بدون نرد.

زر الرجوع يعمل ... من حين لآخر بالنسبة لي. لم يكن يعمل عندما بدأت العمل على التطبيق لأول مرة (هذا هو أول تطبيق Angular الخاص بي) وبدأ العمل فجأة في وقت ما دون أي تغيير واع أو منسوب مني. من الواضح أنني غيرت شيئًا ما ، لكن لا أعرف ماذا. في الأسابيع القليلة الماضية ، يبدو أنه قد حدث خطأ مرة أخرى.

لا يمكنني العثور على مساعدة في أي مكان في الحصول على زر العودة للعمل في وضعي. لا أعرف ما الذي تنسب إليه الانقطاع. أعتقد أنني سأبدأ قريبًا في البحث بمستوى تفصيلي مثير للسخرية ، لكن لا توجد أعلام حمراء يمكنني رؤيتها ...

FWIW ، نحن عالقون أيضًا عند 1.2 ، لذا فإن النقل إلى 1.3 ليس إصلاحًا صالحًا بالنسبة لنا.

هل تم إصلاح المشكلة في 1.3.x؟ IIRC لديها أيضا هذه المسألة.

أصاب هذا الخطأ. كل الروابط غير الزاوية تنقطع. هل هناك أي خطة مستمرة لإصلاحها؟

للتعامل مع هذه المشكلة ، أستخدم توجيهًا يغير روابط الارتساء إلى عناوين url كاملة ، ربما يجدها شخص ما مفيدة: https://gist.github.com/dcadenas/566434ba0af9f3eabb07

هناك علاقات عامة لهذا ، وهنا عرض توضيحي عملي http://plnkr.co/edit/WVPYzaXOKujcb5vSbvJz؟p=preview

إنها ليست مثالية (إنها تعمل فقط مع روابط أجزاء التجزئة النسبية) ، لكنها بداية جيدة - لا تتردد في إعارة أفكارك

لا أعتقد أن هذا يقتصر على مجرد ربط تفاعل الروابط. إذا حاولت فقط تحديث example.com#param ، فستتم إعادة تعيينه أيضًا إلى example.com#/param .

caitp أين هذا العلاقات العامة؟ كيف الحال؟

8508 - تم حظره عند إعادة بعض الأشياء ، والذي أتحدث مع إيغور عنه غدًا.

K. أنا أعمل على مذكرة توثيق صغيرة لـ https://docs.angularjs.org/guide/ $ location في الوقت الحالي - هل تعتقد أن هذا ضروري ، أم يجب أن أتأخر؟

أعني ، يمكنك العمل عليه - يجب أن ترى ما إذا كان CL الذي ربطته يعمل على إصلاح المشكلة الأولى التي تتحدث عنها على الرغم من ذلك ، لأن لدي شكوك في أنها ستعمل (على الأقل في وضع hashbang) --- تم التراجع يرتكب حقًا يؤثر فقط على النقر على روابط الإرساء

caitp أرسل بيانًا عامًا ، إذا كنت تريد التحقق منه لفترة وجيزة. لقد راجعت فرعك - عملت بشكل جيد لمشكلتي ، شكرًا على ذلك. نتطلع إلى رؤية ذلك يندمج في.

Ug ... نسيت إيقاف تشغيل HTML5mode. لا يعمل إذا تم تعطيله. مازال بحاجة لبعض العمل. : /

نعم أعتقد أن هذا خطأ منفصل

ايت. هل أفتح تذكرة لذلك؟

بالتأكيد

هل هناك أي تحديث لهذا الخطأ ، أو هل لا يزال الفريق الأساسي مفتوحًا للعلاقات العامة لإصلاح هذه الوظيفة (حتى لو كان هذا تغييرًا شديد الاختراق)؟

samccone ، قدمت tbosch إصلاحًا لهذا الأمر.

caitp هل هناك رابط للحل الذي تم حله؟ يجب أن أفتقدها. شكرا

22948807e324eb0b182b15b31045dc306a9f3231 (ومجموعة من الالتزامات الأخرى ذات الصلة) هي الإصلاح الكبير

انتظر ، ما الخطأ الذي نتحدث عنه؟ هذا هو خطأ الموقع "الكبير" ، ولكن هناك الكثير من الأخطاء الأخرى أيضًا ، تم إصلاح العديد منها

نعم ، لقد تم إصلاحه هناك ، فقط في انتظار الإصدار 1.2.x لذلك.

شكرا!

أوه! >. <أقضي يومين في معرفة سبب عدم نجاحها. أنا سعيد لأن هذا يصل أيضًا إلى 1.2.x: +1:. على الرغم من أي فكرة عن موعد إطلاقه؟

تعيين الهدف = "_ self" في كل علامة مرساة. يعمل هذا الحل البديل بشكل جيد بالنسبة لي.

تعيين الهدف = "_ الذاتي" لإصلاح مشكلتي. شكرا :)

إعداد target = "_ self" يعمل فقط على إصلاح المشكلة داخليًا في الموقع نفسه. إذا كنت تريد الارتباط من الخارج برابط الارتساء ، فلا يزال هناك هذا الخط المائل الرهيب (الاختطاف الزاوي) الموجود داخل الارتباط التشعبي مباشرةً. إنه فظيع!

أنا أستخدم الإصدار 1.3.9 وهو لا يعمل بعد. لماذا يقول الناس أنه تم إصلاحه في 1.2 ؟؟

wobine لم نقل أنه تم إصلاحه في 1.2. لقد تم إصلاحه ومن المحتمل أن يتم دمجه في 1.2.x لكن هذا لم يحدث بعد.

تمكنت من جعل المراسي تعمل بشكل صحيح باستخدام الإعداد التالي (فهي تراعي فقط روابط الهوية وربما تفسد التوجيه الزاوي لحالات الاستخدام الأكثر تعقيدًا)

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();
    });
}]);

أهلا،

لقد وجدت حلاً لهذا الكابوس ، لكنني جديد على AngularJS ولا أعرف ما إذا كان هذا هو الحل الصحيح.
لقد قمت بتمكين وضع html5 مثل هذا:

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

تعمل جميع الروابط الآن كما هو متوقع ولا توجد أخطاء في js.

لقد تمكنت من التغلب على هذا باستخدام حدث ng-click مع أمر window.open (url):

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

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

أستطيع أن أؤكد أن الإجابة اليدوية تعمل كما هو متوقع مع AngularJS v1.3.13.

المشكلة الوحيدة هي أنه عندما أقوم بالتحميل المباشر على سبيل المثال http://site.com/#test ونقر مرة أخرى على #test ، يكون عنوان URL النهائي هو http://site.com/#test #test.

manutalcual ، الحل الخاص بك هو الحل.

+1 آخر لحل manutalcual . نظرًا لتضمين الزاوية الزاوية ، فمن المحتمل أيضًا أن نلاحظ أنني أستخدم 0.13.0 من ذلك ، والذي يتضمن هذا التغيير المذكور في المحادثة أعلاه.

14315 $ anchorScroll يكسر روابط الارتساء مع تمكين html5mode

هذا هو الحل الخاص بي:
إيقاف توجيه نشر الحدث بأولوية عالية

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();
            });
        }
    };
}]);

ثم في HTML

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

بخصوص المشكلة الأصلية (يؤثر $location على السلوك الافتراضي لروابط الارتساء):

في الواقع يستخدم Angular # (من المحتمل أن يكون مع بادئة تجزئة بعد # ) لتحديد مسار "جانب العميل" (في وضع بخلاف HTML5). إنها مهمة $location للتفاعل مع جزء الهاش من عنوان URL. لذلك ، نظرًا لأنه لا يمكن التمييز بين #some-client-side-route-path لـ #i-want-to-scroll-to-an-element ، يجب أن يفترض دائمًا أنه مسار مسار من جانب العميل.

هناك العديد من الحلول المتاحة (تمت مناقشة معظمها أعلاه) - خاصةً إذا كنت لا تستخدم التوجيه من جانب العميل $location في تطبيقك (ولكن قد يكون لديك تبعيات تقوم بإنشائه):

  1. استخدم مسارًا فارغًا وتجزئة المسار من جانب العميل: href="##i-want-to-scroll-to-an-element" .
  2. قم بتكوين $locationProvider لاستخدام وضع HTML5
  3. قم بتغيير بادئة التجزئة (التي تكون فارغة بشكل افتراضي) ، بحيث لا يتم التعرف على #foo كمسار مسار من جانب العميل. على سبيل المثال ، مع $locationProvider.hashPrefix('!') ، يجب أن يبدأ المسار من جانب العميل بـ #! (على سبيل المثال ، #!foo ). وبالتالي لا يتم التعرف على #foo كمسار ويسري سلوك المتصفح العادي.

ملاحظة: بدءًا من الإصدار 1.6 ، ستكون بادئة التجزئة الافتراضية هي ! ، لذا ستعمل حالة استخدام OP خارج الصندوق (دون الحاجة إلى استدعاء $locationProvider.hashPrefix('!') يدويًا). في الإصدارات القديمة ، تحتاج إلى تكوينه بنفسك.

أتفهم أنه قد يكون هناك العديد من برامج roblems التي تمت مناقشتها في هذه المشكلة ، لكن هذا لا يساعد في تقييمها والتحقيق فيها ونأمل في إصلاحها ، لذلك (نظرًا لأن المشكلة الأصلية تندرج تحت فئة _ / _ ثابتة _ / _ تعمل كما هو متوقع_) ، سأغلق هذه المشكلة . إذا كنت لا تزال تواجه مشكلات مختلفة (لم يتم الإبلاغ عنها بالفعل) ، فيرجى فتح مشكلات منفصلة.

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات