لم يتم تحديث موقع AngularJS $ بشكل صحيح عند استخدام $routeProvider
-
20-12-2019 - |
سؤال
لدي تطبيق Angular JS مع ملف defaultController
الذي يتحكم في رأس التطبيق.ثم لدي بعض وحدات التحكم الأخرى واحدة لكل عرض.يتم تحميل وجهات النظر في <main>
.أقوم بتحميل وجهات النظر باستخدام $routeProvider
بهذا الكود:
myapp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'templates/login.html',
controller: 'loginController'
}).
when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'dashboardController'
}).
...
أحاول عرض زر تسجيل الخروج داخل الرأس عندما يكون العرض المحمل هو لوحة المعلومات وإخفائه إذا كان العرض المحمل هو عرض تسجيل الدخول.من أجل القيام بذلك لدي على defaultController
ال $location
كائن وأقوم بإضافة وإزالة الفئات بشكل صحيح من زر تسجيل الخروج باستخدام ng-class
.
هناك مشكلة واحدة فقط:موقع $ يعطيني المسار الصحيح في المرة الأولى التي أقوم فيها بتحميل الصفحة، ولكن بعد أن أقوم بتغيير العرض (تم تغييره بواسطة $routeProvider
) لم يتم تحديث هذا المتغير بعد الآن، لذلك عندما أكون قيد التشغيل بالفعل /#/dashboard
، ال $location.url
لا يزال قيد التشغيل /login
.هنا رمز وحدة التحكم:
controllers.controller('defaultController', ['$scope', 'ipCookie', '$location', function($scope, ipCookie, $location) {
$scope.url = $location.url();
...
لقد حاولت أيضًا مع $window.location.hash
بنفس النتيجة.
اي فكرة؟
يحرر:بعد الإجابة المقبولة هذا ما أضفته على defaultController
من أجل انجاحه
$scope.$on("$locationChangeSuccess", function() {
$scope.url = $location.url();
});
المحلول
من المحتمل أن يتم تحديث الموقع في الخدمة بعد تحميل وحدة التحكم الافتراضية الخاصة بك.
يمكنك إما حقن $location
الخدمة في النطاق واتخاذ القرارات في القالب الخاص بك بناءً عليها (بعد ذلك ستتم مشاهدتها وإعادة تقييمها تلقائيًا) أو يمكنك الاستماع إلى $locationChangeSuccess
حدث.
عند الحقن، يمكنك ببساطة $scope.location = $location
ثم استخدم شيئًا مثل <a ng-hide="location.path() != '/something'">
.
$location
يبث $locationChangeSuccess
على النطاق الجذر، لذلك يجب أن تكون قادرًا على الاستماع إليه على أي نطاق متاح لديك: $scope.$on( "$locationChangeSuccess", function() { /* do something */ } );