AngularJS: Wie Standard-Beobachter zu deaktivieren, während Daten über $ http erhalten

Question

Ich benutze $ http.get, um Auth und Benutzerdetails zu erhalten, so dass ich Benutzernamen statt der Login-Schaltfläche anzeigen kann.

.directive("plunkerUserPane", ["collectionsManager", function(collectionsManager) { 

    var getAuth = function($http) { 
    $http.get('/user/auth').success(function(response) { 
     if (response.isAuth) { 
     return 'user.html'; 
     } else { 
     return 'userPane.html'; 
     } 
    }); 
    }; 

    return { 
    restrict: "E", 
    replace: true, 
    template: '<div ng-include src="userPane.getTemplate()"></div>', 
    controllerAs: "userPane", 
    controller: ["$scope", "$http", "login", "visitor", function($scope, $http, login, visitor) { 
     this.visitor = visitor; 
     this.getTemplate = function() { 
     var template = 'userPane.html'; 
     template = getAuth($http); 
     return '/components/userPane/' + template; 
     } 
     this.showLoginWindow = function() { 
     login.open(); 
     }; 
    }] 
    }; 
}]) 

Wann immer die Daten von der GET-Anforderung empfangen wird es wieder durch die Standardbeobachter und die Starts und Endlosschleife aufgerufen wird. Wie man sie oder irgendeinen anderen Weg deaktiviert, um dieses Problem zu lösen.

Answer 1

Making API Aufrufe auf scope Methoden ist keine ideale Lösung, da sie mehrere Male wegen $digest Zyklus ausgewertet werden. Sie können dazu callbacks oder promises verwenden und die method entfernen, um http Anfrage von Vorlage zu machen.

Siehe unten

Rückruf

.directive("plunkerUserPane", ["collectionsManager", function(collectionsManager) { 

    var getAuth = function($http, cb) { 
    $http.get('/user/auth').success(function(response) { 
     if (response.isAuth) { 
     cb('user.html'); 
     } else { 
     cb('userPane.html'); 
     } 
    }); 
    }; 

    return { 
    restrict: "E", 
    replace: true, 
    template: '<div ng-include src="userPane.template"></div>', 
    controllerAs: "userPane", 
    controller: ["$scope", "$http", "login", "visitor", function($scope, $http, login, visitor) { 
     var self = this; 
     self.visitor = visitor; 
     self.template = 'userPane.html'; 
     self.showLoginWindow = function() { 
     login.open(); 
     }; 
     getAuth($http, function(template) { 
     self.template = '/components/userPane/' + template; 
     }); 
    }] 
    }; 
}]) 

ODER

Versprechen

.directive("plunkerUserPane", ["collectionsManager", function(collectionsManager) { 

    var getAuth = function($http, cb) { 
    return $http.get('/user/auth').then(function(response) { 
     if (response.isAuth) { 
     return 'user.html'; 
     } else { 
     return 'userPane.html'; 
     } 
    }); 
    }; 

    return { 
    restrict: "E", 
    replace: true, 
    template: '<div ng-include src="userPane.template"></div>', 
    controllerAs: "userPane", 
    controller: ["$scope", "$http", "login", "visitor", function($scope, $http, login, visitor) { 
     var self = this; 
     self.visitor = visitor; 
     self.template = 'userPane.html'; 
     self.showLoginWindow = function() { 
     login.open(); 
     }; 
     getAuth($http).then(function(template) { 
     self.template = '/components/userPane/' + template; 
     }); 
    }] 
    }; 
}]) 

Bitte die Verwendung von Versprechen Kette beachten Sie in obiger Lösung