एंगुलर जेएस नियंत्रक को पुनः लोड करें

Question

मैं angularjs के लिए एक नौसिखिया हूँ।

मेरी समस्या यह है कि मेरे पास लॉगिन और लॉगआउट को संभालने के लिए उपयोगकर्ता नियंत्रक है। मेरी साइट के लिए हेडर मेनू लोड करने के लिए मेरे पास एक और नियंत्रक भी है।

यदि उपयोगकर्ता साइट पर लॉग इन करता है तो मेरा प्रमाणीकृत चर सत्य पर सेट है। यदि चर को सत्य पर सेट किया गया है तो हेडर बदलना चाहिए, लेकिन मुझे लगता है कि हेडर व्यू को बदलने के लिए नियंत्रक को पुनः लोड किया जाना चाहिए।

यहाँ मेरी HeaderController का कोड:

myapp.directive('appHeader', function() { 
    return { 
    restrict: 'E', 
    link: function(scope, element, attrs) { 
     if (attrs.isauthenticated == 'false') { 
     scope.headerUrl = 'views/header/index.html'; 
     } else { 
     scope.headerUrl = 'views/header/isAuthenticated.html'; 
     } 
    }, 
    template: '<div ng-include="headerUrl"></div>' 
    } 
}); 

मेरे index.html:

<div ng-controller="HeaderController"> 
    <app-header isauthenticated="{{isAuthenticated}}"></app-header> 
</div> 

मैं कैसे पुनः लोड कर सकते

myapp.controller('HeaderController', ['$scope', '$location', '$window', 'AuthenticationService', 
    function HeaderController($scope, $location, $window, AuthenticationService) { 
     $scope.isAuthenticated = AuthenticationService.isAuthenticated; 

     if (AuthenticationService.isAuthenticated) { 
      $scope.user.vorname = $window.sessionStorage.user.vorname; 
     } 
    } 
]); 

यहाँ मेरी HeaderDirective का कोड है नियंत्रक अगर उपयोगकर्ता पृष्ठ पर लॉग इन करता है?

पीएस: कृपया मेरे गरीब उच्चारण क्षमा करें।

Answer 1

आपके नियंत्रक को पुनः लोड करने की कोई आवश्यकता नहीं है। $scope.isAuthenticated राज्य परिवर्तनों के समय कोणीय टेम्पलेट को बदलने के लिए पर्याप्त स्मार्ट है।

एक समस्या जो मैं आपके कोड में देखता हूं वह यह है कि एक बार $scope.isAuthenticated परिभाषित किया गया है कि यह अब और नहीं बदलता है। मुझे लगता है कि आप AuthenticationService.isAuthenticated = true सेटिंग कर रहे हैं जब उपयोगकर्ता लॉग इन करता है लेकिन उस परिवर्तन को $scope.isAuthenticated संपत्ति पर प्रचारित नहीं किया जा रहा है क्योंकि जावास्क्रिप्ट स्केलर मानों में संदर्भ के बजाय मूल्य द्वारा प्रतिलिपि बनाई जाती है।

angular.module('auth', []) 
.factory('AuthenticationService', function() { 
    // private state 
    var isAuthenticated = false; 

    // getter and setter 
    var auth = function (state) { 
     if (typeof state !== 'undefined') { isAuthenticated = state; } 
     return isAuthenticated; 
    }; 

    // expose getter-setter 
    return { isAuthenticated: auth }; 
}); 

फिर $ गुंजाइश के लिए कि फ़ंक्शन असाइन:

$scope.isAuthenticated = AuthenticationService.isAuthenticated; 

तब में समारोह का उपयोग

इस तरह के एक समारोह के लिए एक बूलियन से AuthenticationService.isAuthenticated संपत्ति को बदलने के रूप में कई दृष्टिकोण, कर रहे हैं आपका टेम्पलेट (माता-पिता को न भूलें)

<app-header isauthenticated="{{ isAuthenticated() }}"></app-header> 

संपादित करें:

, एक खनखनाहट आप एक काम उदाहरण मैंने महसूस किया है कि निर्देश का लिंक समारोह एक बार की तुलना में अधिक नहीं बुलाया जाता है दिखाने के लिए लिख जबकि इतनी के रूप में this stackoverflow thread में उजागर मैं सिर्फ निर्देश परिवर्तन का पालन करने के लिए संशोधित isauthenticated विशेषता में:

angular.module('directives', []) 
.directive('appHeader', function() { 
    var bool = { 
    'true': true, 
    'false': false 
    }; 

    return { 
    restrict: 'E', 
    link: function (scope, element, attrs) { 
     attrs.$observe('isauthenticated', function (newValue, oldValue) { 
     if (bool[newValue]) { scope.headerUrl = 'authenticated.html'; } 
     else { scope.headerUrl = 'not-authenticated.html'; } 
     }); 
    }, 
    template: '<div ng-include="headerUrl"></div>' 
    } 
}); 

और here is the working example

Answer 2

कोड के इस टुकड़े जोड़े के बाद उपयोगकर्ता को प्रमाणीकृत किया जाता है:

// To refresh the page 
$timeout(function() { 
    // 0 ms delay to reload the page. 
    $route.reload(); 
}, 0); 

मत भूलना $timeout और अपने नियंत्रक में $route शामिल करने के लिए।

myapp.controller('HeaderController', ['$scope', '$location', '$window', 'AuthenticationService', '$timeout', '$route', 
function HeaderController($scope, $location, $window, AuthenticationService, $timeout, $route)