لم يتم تحديث موقع AngularJS $ بشكل صحيح عند استخدام $routeProvider

StackOverflow https://stackoverflow.com//questions/23000180

سؤال

لدي تطبيق 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 */ } );

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top